优化点
开发优化
0.node环境安装最新稳定版本
1.devServer: 配置contentBase 节省前端静态资源没必要的操作？
2.devtool->sourceMap选择eval-cheap-module-source-map 最优（有个 sourceMaploader）
3.resolve 优化，减少查找文件的消耗：
- extensions：配置扩展名
- modules：查询第三方依赖库的文件位置
- alias：起别名，减少查找过程
- externals：对通过cdn链接引用的对象不对其进行打包
4.配置loader的exclude或者include减少操作文件范围（loader消耗的性能很大）
5.cache-loader：缓存一些性能开销比较大的 loader 的处理结果
6.url-loader: 对小图标转base64打包到js里面
7.babel/preset-env设置useBuiltIns：usage 按需加载替换API的方法
8.css文件单独打包使用 minicssextractplugin并用contenthash命名并用 optimizecssassetswebpackplugin压缩
9.使⽤happypack并发执⾏任务
运行优化
1.配置optimization.splitChunks all => 所有的chunks代码公共的部分分离出来成为⼀个单独的⽂件
2.配置optimization.usedExports true => tree shaking只在mode pro时生效
3.配置optimization.concatenateModules true =>通过 ES6 语法的静态分析，分析出模块之间的依赖关 系，尽可能地把模块放到同⼀个函数中
4.webpack魔法注释，预加载和懒加载
5. HardSourceWebpackPlugin对不怎么变动版本的第三方库做缓存加快打包速度！、
6.babel-plugin-import 按需加载第三方库
问题
1.为什么Loader 的执行顺序是固定从后往前？
因为webpack选择了compose这样的函数式编程方式，而 gulp 却选择应用从左到右的pipe 管道式编程。
function compose(...funcs){
return funcs.reduce((a,b)=>(...args)=>a(b(args)))
}
2.plugins有哪些？类（作为webpack功能补充增强，作用于整个打包过程）
- cleanwebpackplugin清空打包目前旧资源
- htmlwebpackpluginhtml模板
- minicssextractplugin 单独打包css文件
- optimizecssassetswebpackplugin压缩css文件
- babel-plugin-import 按需加载第三方库
3.loader有哪些？函数（webpack默认只支持js和json格式文件）
-
less-loader postcss-loader css-loader（把css模块内容放到js中；开启cssmodules） style-loader（从js中提取css内容，默认创建style标签将css插入标签并挂在到文档的head上）
-
filer-loader -> url-loader img-loader
-
babel-loader
5.多入口怎么配置？
entry用对象模式，output用占位符命名
6.mode原理？
配置development和production启动的构建plugin不同。
7.dev配置和pro配置怎么区分？
webpack-merge合并baseconfig和devconfig或proconfig
执行时webpack -- config ./configurl或者用cross-env变量区别
webpack原理
1.fs读取文件
2.Babel/parser解析成AST，将代码转化为（抽象语法）对象
3.Babel/traverse遍历AST树，对import依赖节点做回调解析出对应路径并记录
4.Babel/core的transformFromAst和Babel/presets将AST树从es6转es5，用babel/polyfile替换es6api
5.Babel/generator对require和exports函数替换
一个module对应一个文件，一个chunk由多个module构成，bundle是资源文件
chunkhash：chunk内容改变hash才会改变
contenthash：一般用于css文件单独打包使用 minicssextractplugin
