webpack配置

• Webpack自身只支持加载js和json模块，而webpack的理念是让所有的文件都能被引用和加载并生成依赖关系图， Loader是用来转换和加载特定类型的文件，所以loader的执行层面是单个的源文件。 而plugin可以实现的功能更强大，plugin可以监听webpack处理过程中的关键事件，深度集成进webpack的编译器， 可以说plugin的执行层面是整个构建过程。

• public path 配置的前缀只会添加在在js中引用的css,img等静态资源，html中的路径不会更改；
• 多页面配置

  1. 入口文件分开
  2. 配置多个HtmlWebpackPlugin，每个要添加chunks属性(name=entry中的name，数组类型，string无效)，
  指定需要引用的js，不加会将entry的全部引入；
  

• entry写法不同，打包结果也有差异：
• 如果 entry 是一个 string 或 array，就只会生成一个 Chunk，这时 Chunk 的名 称是 main。
• 如果 entry 是一个 object，就可能会出现多个 Chunk，这时 Chunk 的名称是 object 键值对中键的名称。 ``` output: { filename: ‘[name].bundle.js’ } outer 输出格式如上：

1.entry: ‘./src/index.js’
main.bundle.js,index依赖的所有相关引用都在这个文件里

2.entry: { app:’./src/index.js’, print:’./src/print.js’ }, app.bundle.js,print.bundle.js;main.bundle.js; app.bundle.js,print.bundle.js只存放index.js,print.js对应的文件； main.bundle.js里存放他们的依赖；

3.entry: {main:[’./src/index.js’,’./src/print.js’]}, main.bundle.js,index，print依赖的所有相关引用都在这个文件里

- Externals
> 

externals: { // key是我们 import 的包名，value 是CDN为我们提供的全局变量名 // 所以最后 webpack 会把一个静态资源编译成：module.export.react = window.React “react”: “React”, “react-dom”: “ReactDOM”, “redux”: “Redux”, “react-router-dom”: “ReactRouterDOM” } ```