搞个小例子便于学习:

具体操作为把上节中的webpack.config.js中的entry入口文件进行模块化设置,单独拿出来制作成一个模块。

1.在根目录新建一个config文件,然后新建webpack.entry.js文件,代码如下:

webpack.entry.js:

//声明entry变量
const entry ={};
//声明路径属性
entry.path={
entry:'./src/entry.js'
}
//进行模块化
module.exports =entry;

2.entry模块中的代码写完好,改造我们之前在webpack.config.js文件中入口文件引入方式。

(1)使用require()将模块代码引入

const entry=require("./config/webpack.entry.js");

(2)然后在入口文件部分,修改成如下代码:

entry:entry.path,

3.测试引入是否成功

使用npm run dev 进行测试,结果为成功打包,说明模块化成功了。

此处只是简单做了入口文件的模块化,其余的操作方式类似。

(18/24) webpack实战技巧:快速入门webpack模块化配置的更多相关文章

  1. (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换

    1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...

  2. (19/24) webpack实战技巧:推荐使用的第三方类库打包方法

    在日常的开发中,总避免不了引入第三方的框架,比如常用的JQuery,此节我们来学习一下如何优雅并正确的用webpack引入第三方库. 这里我们以第三方框架JQuery为例: 1.在入口文件中引入 1. ...

  3. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  4. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  5. Web Api 入门实战 (快速入门+工具使用+不依赖IIS)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  6. RockerMQ实战之快速入门

    文章目录 RocketMQ 是什么 专业术语 Producer Producer Group Consumer Consumer Group Topic Message Tag Broker Name ...

  7. RocketMQ 实战之快速入门

    原文地址:https://www.jianshu.com/p/824066d70da8 最近 RocketMQ 刚刚上生产环境,闲暇之时在这里做一些分享,主要目的是让初学者能快速上手RocketMQ. ...

  8. (23/24) webpack实战技巧:如何在webpack环境中使用Json

    在webpack1或者webpack2版本中,若想在webpack环境中加载Json文件,则需要加载一个json-loader的loader进来的.但是在webpack3.x版本中,则不需要在另外引入 ...

  9. (22/24) webpack实战技巧:静态资源集中输出

    工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中.此时 ...

随机推荐

  1. jsp之response方法

    response简介 response对象:对客户端的请求作出回应,将Web服务器处理后的结果发回客户端. response对象:属于javax.servlet.HttpServletResponse ...

  2. 使用Visual Studio2013打开Visual Studio2015项目

    使用VS2013打开VS2015的项目,操作步骤如下: ======================================== ①用记事本或者Notepad++ 打开项目sln文件进行编辑, ...

  3. CTF之ROT加解密

    常见的ROT加密包括ROT5,ROT13,ROT18,ROT47 ROT5:只是对数字进行编码.用当前数字往后数的第五个数字替换当前数字: 例:123sb——>678sb ROT13:只是对字母 ...

  4. 安装Scipy出错的解决方法

    lapack_opt_info: lapack_mkl_info: libraries mkl_rt not found in ['c:\\python27\\lib', 'C:\\', 'c:\\p ...

  5. oracle nodejs 访问

    1. 下载node-oracle网址如下: https://github.com/joeferner/node-oracle 2. 测试代码: var oracle = require('oracle ...

  6. 使用MQ要考虑的问题

    一般现代软件系统都会用到MQ,几乎所有开发人员也都会想到用MQ,但真正能用好的人估计不多,因为要用好MQ有很多方面问题要考虑: 1.在原直接交互的系统间增加MQ中间层,MQ的性能.可靠程度会严重影响原 ...

  7. 【转】每天一个linux命令(19):find 命令概览

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/13/2767374.html Linux下find命令在目录结构中搜索文件,并执行指定的操作.Li ...

  8. node 知识点

    问:局部安装如何使用npm run命令? 答:如果已局部安装了babel-cli(babel-cli自带babel-node命令),package.json文件配置如下: "scripts& ...

  9. koa 知识点

    1. Koa 不支持 直接调用底层 res 进行响应处理.请避免使用以下 node 属性: res.statusCode res.writeHead() res.write() res.end() 2 ...

  10. jquery禁止复制、禁用右键、文本选择功能、复制按键

    本文章介绍的jquery禁用右键.文本选择功能.复制按键的实现它可以兼容浏览器有IE.firefox.谷歌浏览器,各位朋友可参考.IE浏览器是指以IE为核心的浏览器也支持,有360,QQ等 代码如下: ...