webapck 3升4在 Webpack 4 中，不再强制要求指定 entry 和 output 路径。webpack

本文记录了部分项目从 webapck 3升到4 过程中遇到的相关问题，文章过程不够详细

yarn add webpack -D

yarn add webpack-cli -D

默认配置

在 Webpack 4 中，不再强制要求指定 entry 和 output 路径。webpack 4 会默认 entry 为 ./src，output 为 ./dist

构建模式 mode:

Webpack 4 配置, 必须配置 mode 属性，可选值有 development,production,none,否则报错，会根据mode 属性进行默认的配置

development 默认开启插件(无需配置):

NamedModulesPlugin->optimization.namedModules
development 模式使用 eval 构建 module，用来提升构建速度
webpack.DefinePlugin 插件的 process.env.NODE_ENV 的值不需要再定义，默认是 development

production 默认开启插件(无需配置):

NoEmitOnErrorsPlugin->optimization.noEmitOnErrors
ModuleConcatenationPlugin->optimization.concatenateModules
webpack.DefinePlugin 插件的 process.env.NODE_ENV 的值不需要再定义，默认是 production

公共代码提取

Webpack3的commonschunk hash问题非常的不雅，使用复杂, Webpack 4 直接将
CommonsChunkPlugin 插件直接改为 optimization.splitChunks
和 optimization.runtimeChunk 两个配置

Webpack 3

plugins:[
  new webpack.optimize.CommonsChunkPlugin({ names: 'common'}),
  new webpack.optimize.CommonsChunkPlugin({ name: 'runtime', chunks:['common']})
]

Webpack 4

optimization: {
   splitChunks: {
     chunks: 'all',
     name: 'common',
   },
   runtimeChunk: {
     name: 'runtime',
   }
 }

压缩

压缩插件更新到 uglifyjs-webpack-plugin 1.0 版本，支持多进程压缩，缓存以及es6语法，无需单独安装转换器。当 mode='production' 默认开启压缩，无需配置。可以通过 optimization.minimize 和 optimization.minimizer 自定义配置。

optimization.minimize 是否启用压缩
optimization.minimizer 制定压缩库, 默认 uglifyjs-webpack-plugin 1.0
Webpack 3

new webpack.optimize.UglifyJsPlugin( {
        // 最紧凑的输出
        beautify : false,
        // 删除所有的注释
        comments : false,
        compress : {
            warnings : false, // 警告开关
            drop_console : true,
            // 内嵌定义了但是只用到一次的变量
            collapse_vars : true,
            // 提取出出现多次但是没有定义成变量去引用的静态值
            reduce_vars   : true
        }
        } ),

Webpack 4

optimization = {
    minimizer: [
        new UglifyJsPlugin({
            uglifyOptions: {
                // 最紧凑的输出
                beautify: false,
                // 删除所有的注释
                comments: false,
                compress: {
                    warnings: false, // 警告开关
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true
                }
            }
        })
    ]
}

优化配置

Webpack 4 默认内置了一些配置, 但额外又增加了一些配置，比如 optimization 配置属性，差不多 20 各左右的属性配置, 具体看webpack/schemas/WebpackOptions.json

问题一 webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

util.js
new webpack.optimize.CommonsChunkPlugin({name: ['vendor']}),
替换为
new webpack.optimize.SplitChunksPlugin({name: ['vendor']})

问题二 compilation.mainTemplate.applyPluginsWaterfall is not a function

yarn add html-webpack-plugin -D

问题三 TypeError: Cannot read property 'fileLoader' of undefined

yarn add url-loader --save-dev

替换 file-loader 为 url-loader

webapck 3升4