【升级webpack4】mini-css-extract-plugin 替换 extract-text-webpack-plugin

负责的项目webpack的版本是3，最近在学习（折腾）webpack，看了官网的升级指南（webpack.js.org/migrate/4/#…）后，就开始对项目的webpack进行升级

首当其冲的问题

extract-text-webpack-plugin不再支持webpack4，请使用mini-css-extract-plugin

本想着能偷偷懒，百度一下，看看有没有大佬写了攻略，结果没有。。那就既来之，则安之了。废话不多说，直接上代码

代码

对所有用到 extract-text-webpack-plugin 的地方进行改造

utils.js // 文件

// let ExtractTextPlugin = require('extract-text-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')

if () {
    // return ExtractTextPlugin.extract({
    //    use: loaders,
    //    fallback: 'vue-style-loader'
    // })
    return [MiniCssExtractPlugin.loader].concat(loaders)
}

webpack.prod.config.js // 文件

// 参考官方文档：https://www.npmjs.com/package/mini-css-extract-plugin

let MiniCssExtractPlugin = require('mini-css-extract-plugin')
let TerserJSPlugin = require('terser-webpack-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

function recursiveIssuer(m) {
    if (m.issuer) {
        return recursiveIssuer(m.issuer)
    } else if (m.name) {
        return m.name
    } else {
        return false
    }
}
webpackConfig = {
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
        runtimeChunk: {
            name: 'runtime'
        },
        splitChunks: {
            // 多入口，根据入口打包css
            cacheGroups: {
                homeStyles: {
                    name: 'home',
                    test: (m, c, entry = 'home') =>
                        m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
                    chunks: 'all',
                    enforce: true
                },
                cardsettingStyles: {
                    name: 'cardsetting',
                    test: (m, c, entry = 'cardsetting') =>
                        m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
                    chunks: 'all',
                    enforce: true
                }
            }
        }，
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'css/[name].[contenthash].css',
                ignoreOrder: true
            })
        ]
    }
}

总结：

mini-css-extract-plugin 替换 extract-text-webpack-plugin 整体下来还是比较顺利的。关键是一定要_多看官方文档，多看官方文档，多看官方文档_，百度什么的，知识都很零碎。

升级webpack4，一通折腾下来，个人感觉还是得不偿失，还不如脚手架来得顺利和安心。而且后期还需要承担出现隐藏bug的风险，出了问题就得背锅（笑哭）。

不过也是不折腾就不会学到知识了，把webpack折腾一遍，也能大概地了解webpack的打包流程，神奇的知识又增加了（笑哭）