webpack的API

1，mode
mode有三个选项，none（不做任何操作），production(生产环境)，development(开发环境)

2、entry入口配置

3、 output 出口配置,filename: “bundle.js”, //输出的为文件名,path: path.join(__dirname, ‘dist’), //输出目录

publicPath: "./", //公共文件路径

4、devtool,相当于开发调试工具

eval 文档上解释的很明白，每个模块都封装到 eval 包裹起来，并在后面添加 //# sourceURL
source-map 这是最原始的 source-map 实现方式，其实现是打包代码同时创建一个新的 sourcemap 文件，<br />    并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿
hidden-source-map 文档上也说了，就是 soucremap 但没注释，没注释怎么找文件呢？貌似只能靠后缀，<br />    譬如xxx/bundle.js 文件，某些引擎会尝试去找 xxx/bundle.js.map
inline-source-map 为每一个文件添加 sourcemap 的DataUrl，注意这里的文件是打包前的每一个文件而不是最后打包出来的，<br />    同时这个 DataUrl 是包含一个文件完整 souremap信息的 Base64 格式化后的字符串，而不是一个 url。
eval-source-map 这个就是把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrl
cheap-source-map 不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）
cheap-module-source-map 不包含列信息，同时 loader 的 sourcemap 也被简化为只包含对应行的。<br />    最终的 sourcemap 只有一份，它是 webpack 对 loader 生成的 sourcemap 进行简化，然后再次生成的。

5、module:

辅助模块可以使用不同的loader来处理相应的文件，例如使用ES6语法就要使用babel-loader，
处理css文件就要使用css-loader和style-loader，需要注意的是执行顺序是从后往前执行的,<br />    最后的loader最先执行这点需要注意
处理图片就要用file-loader

6、devServe 本地服务器

可以开启本地服务器以及热替换 代码如下,open:true,hot:true,port:8080,

resolve:解析模块的规则

(1)、resolve.alias，
resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径

(2)、extensions
配置省略文件路径的后缀名

(3)modules
resolve.modules 配置 Webpack 去哪些目录下寻找第三方模块，默认是只会去 node_modules 目录下寻找。
可指定目录，提升速度，默认就是 modules: [“node_modules”]，一般可不写

plugins: 插件

 plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建相关关的事情。<br />     plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，<br />     plugin需要的参数通过构造函数传入。<br />   <br />     使用plugin的难点在于plugin本身的配置项，而不是如何在webpack中引入plugin，<br />     几乎所有webpack无法直接实现的功能，都能找到开源的plugin去解决，我们要做的就是去找更据自己的需要找出相应的plugin。