webpack4变化

1、mode（零配置configration），区分使用场景(生成/开发/none自定义配置)。

        webpack4中mode分三种：“-- production(生产环境)”,"--development(开发环境)","--none(不使用前两个默认的配置)"，上面的每一种模式都对应着一种配置。

package.json

        我们在实际开发过程中可以设置mode来在我们自定义配置的基础上 加上 mode提供给我们的配置。

自己配置＋mode

2、4打包速度比3提高了90%。

3、optimization.splitChunks替代了CommonsChunkPlugin。

        splitChunks: { name:true//分割出来的代码有名字，minSize: 0//多大的公共文件会被分割出来，cacheGroups: { jquery: { test: /(jquery)|(jquery-swiper)/ , chunks: 'initial'} } }  

        当我们使用第三方库(不太会变，比较稳定)，需要把它们长缓存来优化。 

        如果我们希望把所以异步引入的模块都合到一个模块只要把它们的import( /*webpackChunkName: 'name'*/'./modules/moduleB.js')中的name写成同一个即可。

4、optimization.minimizer()来指定压缩器(可以是之前的uglifyjs)。在指定压缩器为uglifyEs时，可以直接对ES6进行treeShaking。

        1、不用插件，optimization: {minmize: false //不压缩}

        2、用插件，安装 install uglifyjs-webpack-plugin，引入const UglifyJs = require('uglifyjs-webpack-plugin')，使用 optimization: {minmizer: [ new UglifyJs({  uglifyOptions:({ eama: 6, cache: true, parallel: true  }) }) ]}。如果让tree shaking生效，在.babelrc文件中"presets": [["env", { "modules" : false }]]，就ok了，用零配置webpack在打包时候会做treeShaking，仅仅是把export出来的东西和它有没有用的到这些代码进行了筛选。会提取公共代码(比如webpack runtime代码)，optimization: { runtimeChunk :true }

默认配置(零配置)哪些情况会被切分。

        1、新chunk是共同依赖的，或是从node_modules中来的

        2、新chunk大于30kb

        3、按需加载的时候，最大的并行下载chunk数量小于等于5

        4、首屏家在时候，最小的并行下载chunk数量小于等于3

总结：好处，1、可以零配置运行。2、打包速度比之前提高90%。直接支持Tree shaking ES6。4、RuntimeChunk／SplitChunks很好用。

未来：css成为原生模块，HTML成为原生模块，URL/FILE成为原生模块，不需要extract-text-webpack-plugin，不需要CSS FILE URL loader，直接支持CSS Code Splitting,HTML entry

一些变化：

        1、异步动态引入js模块，需要安装babel-plugin-dynamic-import-webpack --save，并且在.babelrc中配置"plugins": ["dynamic-import-webpack"]。

        2、mode : production,想要做到tree Shaking，需要在.babelrc中配置"presets":[{"modules" : false}]

        3、使用extract-text-webpack-plugin提取css会报错，需要 npm i extract-text-webpack-plugin@next --save-dev