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

·  阅读 3184

负责的项目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的打包流程,神奇的知识又增加了(笑哭)

分类:
前端
标签:
分类:
前端
标签: