webpack.config.js 参数详解

 

 

webpack.config.js文件一般放在项目的根目录中，它自己也是一个标准的Commonjs规范的模块。

1.entry

entry能够是个字符串或数组或者是对象。 
当entry是个字符串的时候，用来定义入口文件：

当entry是个数组的时候，里面一样包含入口js文件，另一个参数能够是用来配置webpack提供的一个静态资源服务器，webpack-dev-server。webpack-dev-server会监控项目中每个文件的变化，实时的进行构建，而且自动刷新页面：

当entry是个对象的时候，咱们能够将不一样的文件构建成不一样的文件，按需使用，好比在个人hello页面中只要\引入hello.js便可：

2.output 
output参数是个对象，用于定义构建后的文件的输出。其中包含path和filename：

 

当咱们在entry中定义构建多个文件时，filename能够对应的更改成[name].js用于定义不一样文件构建后的名字。

---

 

 

 3.module 
关于模块的加载相关，咱们就定义在module.loaders中。这里经过正则表达式去匹配不一样后缀的文件名，而后给它们定义不一样的加载器。好比说给less文件定义串联的三个加载器（！用来定义级联关系）：

 

此外，还能够添加用来定义png、jpg这样的图片资源在小于10k时自动处理为base64图片的加载器：

 

给css和less还有图片添加了loader以后，咱们不只能够像在node中那样require js文件了，咱们还能够require css、less甚至图片文件：

 

可是须要知道的是，这样require来的文件会内联到 js bundle中。若是咱们须要把保留require的写法又想把css文件单独拿出来，可使用下面提到的[extract-text-webpack-plugin]插件。 
在上面示例代码中配置的第一个loaders咱们能够看到一个叫作react-hot的加载器。个人项目是用来学习react写相关代码的，因此配置了一个react-hot加载器，经过它，能够实现对react组件的热替换。咱们已经在entry参数中配置了webpack/hot/only-dev-server,因此咱们只要在启动webpack开发服务器时开启–hot参数，就可使用react-hot-loader了。在package.json文件中这样定义：

 

 

4.resolve 
webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序能够自行补全哪些文件后缀：

 

 

而后咱们想要加载一个js文件时，只要require(‘common’)就能够加载common.js文件了

 6.externals 
当咱们想在项目中require一些其余的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中颇有必要。此时咱们就能够经过配置externals参数来解决这个问题：

 

 

这样咱们就能够放心的在项目中使用这些API了：var jQuery = require(“jquery”);

---

 7.context 
当咱们在require一个模块的时候，若是在require中包含变量，像这样：

那么在编译的时候咱们是不能知道具体的模块的。但这个时候，webpack也会为咱们作些分析工做：

 

1.分析目录：’./mods’； 
2.提取正则表达式：’/^.*.js$/’；

因而这个时候为了更好地配合wenpack进行编译，咱们能够给它指明路径，像在cake-webpack-config中所作的那样（咱们在这里先忽略abcoption的做用）：