webpack4不完全升级指南

react-family升级webpack4

依赖

重新安装webpack相关依赖包

webpack
新增加webpack-cli
html-webpack-plugin
webpack-dev-server
各种loader,主要是file-loader,url-loader，其他看着办

移除

uglifyjs-webpack-plugin: production莫斯自动支持
-

配置改动

CommonsChunkPlugin

移除

webpack.config.optimization.splitChunks({

1 2	name: 'vendor' }),

修改为

optimization: {
       runtimeChunk: true,
       splitChunks:{
           chunks: 'all',
           minSize: 30000,
           minChunks: 1,
           maxAsyncRequests: 5,
           maxInitialRequests: 3,
           name: false,
           cacheGroups: {
               vendor: {
                   name: 'vendor',
                   chunks: 'initial',
                   priority: -10,
                   reuseExistingChunk: false,
                   test: /node_modules\/(.*)\.js/
               },
               default: {
                   minChunks: 2,
                   priority: -20,
                   reuseExistingChunk: true
               }
           }
       }
   }

mode

生产环境默认开启了很多代码优化（minify，splite等）
开发时开启注视和验证，并且自动加上了eval devtool
生产环境不支持watching，开发环境优化了重新打包的速度
自动设置process.env.NODE_ENV到不同环境，也就是不需要DefinePlugin来做这个了
如果你给mode设置为none，所有默认配置都去掉了

方式1: 启动命令后加入参数

"scripts": {
   "dev": "webpack --mode development",
   "build": "webpack --mode production"
 }

方式2: 配置文件中加入mode属性
1
2
mode: 'production' // development
};
development模式下

浏览器调试工具
开发阶段的详细错误日志和提示
快速和优化的增量构建机制
production模式下

开启所有的优化代码
更小的bundle大小
去除掉只在开发阶段运行的代码
Scope hoisting和Tree-shaking
自动启用uglifyjs对代码进行压缩

ExtractTextWebpackPlugin

使用mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // replace ExtractTextPlugin.extract({..})
          "css-loader"
        ]
      }
    ]
  }
}