Webpack 3.X - 4.X 升级记录-蒲公英云

Webpack 3.X - 4.X 升级记录

先升级 webpack-cli

首先：执行命令

npm install webpack-cli -D
或者
npm install -g yarn
yarn add webpack-cli -D

启动服务出现的问题

问题1：compilation.mainTemplate.applyPluginsWaterfall is not a function
示例图1
暂时解决方案：

yarn add webpack-contrib/html-webpack-plugin -D

相关讨论解决方案，在这里

问题2：Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

示例图2

解决方案：去除，require(‘extract-text-webpack-plugin’)的引用

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

示例3

目前，4.0中已经删除CommonsChunkPlugin，替换成了splitChunks，这里有相关介绍内容

解决方案：去除 new webpack.optimize.CommonsChunkPlugin，修改为

optimization: { runtimeChunk: { name: "manifest" },
    splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: "vendor", chunks: "all" }
        }
    }
}

即可！

optimization参数介绍：

optimization: {
    splitChunks: {
      chunks: "initial",         // 必须三选一： "initial" | "all"(默认就是all) | "async"
      minSize: 0,                // 最小尺寸，默认0
      minChunks: 1,              // 最小 chunk ，默认1
      maxAsyncRequests: 1,       // 最大异步请求数， 默认1
      maxInitialRequests: 1,    // 最大初始化请求书，默认1
      name: () => {},              // 名称，此选项课接收 function
      cacheGroups: {                 // 这里开始设置缓存的 chunks
        priority: "0",                // 缓存组优先级 false | object |
        vendor: {                   // key 为entry中定义的 入口名称
          chunks: "initial",        // 必须三选一： "initial" | "all" | "async"(默认就是异步)
          test: /react|lodash/,     // 正则规则验证，如果符合就提取 chunk
          name: "vendor",           // 要缓存的 分隔出来的 chunk 名称
          minSize: 0,
          minChunks: 1,
          enforce: true,
          maxAsyncRequests: 1,       // 最大异步请求数， 默认1
          maxInitialRequests: 1,    // 最大初始化请求书，默认1
          reuseExistingChunk: true   // 可设置是否重用该chunk（查看源码没有发现默认值）
        }
      }
    }
  },

==最后，optimization 使用相关内容在这里==

CommonsChunkPlugin

https://news.aotu.io/a/5a7b53d3d50eee0042c20c0c?utm_medium=lite02_web&utm_source=aotu_io

问题4：警告

示例4

警告提示，表示在启动服务的时候没有指定mode

在 package.json 中加上--mode development或者--mode production即可，如下示例：

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

最后，贴上我的webpack.config.js配置：

var webpack = require('webpack'),
    path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    //ExtractTextPlugin = require('extract-text-webpack-plugin'), 4.0弃用
    ip = require('ip'),
    CleanPlugin = require('clean-webpack-plugin'),
    c = require('./config/packConfig'),
    HashedModuleIdsPlugin = require('./config/HashedModuleIdsPlugin'),
    BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
    Visualizer = require('webpack-visualizer-plugin'),
    HappyPack = require('happypack'),
    CopyWebpackPlugin = require('copy-webpack-plugin'),
    CompressionPlugin = require('compression-webpack-plugin');
const resolve = dir => {
    return path.join(__dirname, c.cf.entry.module, dir)
}
module.exports = {
    entry: {
        app: resolve("/components/app.js"),
        vendor: c.cf.entry.vendor,
    },
    output: {
        path: resolve(c.cf.output.path),
        publicPath: '',
        filename: "assets/js/[name]" + env + ".js",
        chunkFilename: "chunk/[name]" + env + ".js",
        library: 'library',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    devServer: {
        inline: true,
        open: true,
        port: c.cf.server.port,
        compress: true,
        host: ip.address(),
        progress: true,
        historyApiFallback: true,
        contentBase: "./",
        https: false,
        proxy: c.prox
    },
    //4.0配置
    optimization: {
        /*splitChunks: {
            chunks: 'all',//"initial" | "async" | "all"
            cacheGroups: {
                default: false,
                vendors: false,
            },
        },*/
        /*splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
            }
        }*/
        runtimeChunk: {
            name: "manifest"
        },
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                }
            }
        }
    },
    resolveLoader: {
        moduleExtensions: ['-loader']
    },
    module: {
        //4.0之前是 loaders,现在修改为 rules
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
        }, {
            test: /\.vue$/,
            exclude: /node_modules/,
            loader: 'vue',
        }, {
            test: /\.(css|less)$/,
            exclude: /node_modules/,
            loader: "style!css!less"
        }, {
            test: /\.(html|tpl)$/,
            exclude: /node_modules/,
            loader: 'html'
        }, {
            test: /\.jsx$/,
            exclude: /node_modules/,
            loaders: ['jsx', 'babel']
        }],
        noParse: /jquery|lodash/,
        unknownContextRegExp: /$^/,
        unknownContextCritical: false,
        exprContextRegExp: /$^/,
        exprContextCritical: false,
        wrappedContextRegExp: /$^/,
        wrappedContextCritical: false,
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: resolve('/components/index.html')
        }),
        new HashedModuleIdsPlugin(),
        /* //4.0 删除 CommonsChunkPlugin模块，改为splitChunks
         * new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            chunks: ['vendor'],
        }),
        /* //4.0报错   Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
         new ExtractTextPlugin({
            filename: 'assets/css/[name].css',
            allChunks: true 
        }),*/
        new CompressionPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp('\\.(js|css)$'),
            threshold: 50240,
            minRatio: 0.8
        }),
        //new webpack.NoErrorsPlugin(), 
        new webpack.optimize.OccurrenceOrderPlugin(),
        new CleanPlugin(["*"], {
            "root": resolve(c.cf.output.path),
            verbose: true,
            dry: false
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};