webpack 2 升级到 4

[KirinHuang]

1. 模式(mode)
   webpack 之前有两个模式：development\production。 在4.0的版本中，需要通过--mode production 传递，也可以在webpack的配置文件中配置

mode: 'development'

2. 插件
   下面的这些插件在4.0版本中已经remove掉了.

• NoEmitOnErrorsPlugin
• ModuleConcatenationPlugin
• NamedModulesPlugin
• CommonsChunkPlugin
  在现在的版本中可以使用optimization去配置

plugins: [
    // new webpack.NamedModulesPlugin(), => not used like this anymore
    // new webpack.NoEmitOnErrorsPlugin(), => not used like this anymore
    // new webpack.optimize.CommonsChunkPlugin({ => not used like this anymore
        // name: 'vendor',
        // children: true,
        // minChunks: 2,
        // async: true,
    // }),
    // new webpack.optimize.ModuleConcatenationPlugin(), => not used like this anymore
],

optimization: {
    namedModules: true, // NamedModulesPlugin()
    splitChunks: { // CommonsChunkPlugin()
        name: 'vendor',
        minChunks: 2
    },
    noEmitOnErrors: true,         // NoEmitOnErrorsPlugin
    concatenateModules: true, //ModuleConcatenationPlugin
    minimize: true,                    //UglifyJsPlugin
}

4. 依赖
   • webpack-cli Error: Cannot find module 'webpack/bin/config-yargs'
   • webpack-dev-server 3.0+ TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
   • html-webpack-plugin 3.2.0+ TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
   • babel-loader 7.0+ Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot read property 'babel' of undefined
   • file-loader 1.1+ TypeError: Cannot read property 'fileLoader' of undefined
   • vue-loader 15+ Module build failed (from ./node_modules/vue-loader/index.js): TypeError: Cannot read property 'vue' of undefined