webpack3和webpack4区别

1.mode

webpack增长了一个mode配置，只有两种值development | production。对不一样的环境他会启用不一样的配置。

好比设置mode等于'development'，会将 process.env.NODE_ENV 的值设为 development，开发环境下启用optimization.nameModules（原nameModulesPlugin已经弃用）。设置mode等于'production'，会将 process.env.NODE_ENV 的值设为 production，而生产环境默认用optimization.noEmitOnErrors`（原noEmitOnErrorsPlugin已弃用）

webpack4中经过内置的mode使用相应模式的内置优化。设置mode等于'development'，会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。设置mode等于'production'，会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

不一样环境下配置以下

1 默认生产环境开起了不少代码优化（minify, splite）
2 开发时开启注视和验证，并加上了evel devtool
3 生产环境不支持watching，开发环境优化了打包的速度
4 生产环境开启模块串联（原ModulecondatenationPlugin）
5 自动设置process.env.NODE_EVN到不一样环境，也就是不使用DefinePlugin了
6 若是mode设置none，全部默认设置都去掉了。

 

2.CommonsChunkPlugin

CommonChunksPlugin已经从webpack4中移除。可以使用optimization.splitChunks进行模块划分（提取公用代码）。

可是须要注意一个问题，默认配置只会对异步请求的模块进行提取拆分，若是要对entry进行拆分，须要设置optimization.splitChunks.chunks = 'all'。

对应以前咱们拆分runtime的状况，如今也有一个配置optimization.runtimeChunk，设置为true就会自动拆分runtime文件

 

3.webpack4使用MiniCssExtractPlugin取代ExtractTextWebpackPlugin。

4.代码分割。

使用动态import，而不是用system.import或者require.ensure

5.vue-loader。

使用vue-loader插件为.vue文件中的各部分使用相对应的loader，好比css-loader等

6.UglifyJsPlugin

如今也不须要使用这个plugin了，只须要使用optimization.minimize为true就行，production mode下面自动为true

optimization.minimizer能够配置你本身的压缩程序