webpack插件使用总结

1.开发环境 vue2+webpack4
2.电脑系统 windows11专业版
3.在使用webpack中,我们经常会安装一些插件来解决一些问题,下面我来分享一下我使用中遇到的问题,希望对你有所帮助。
4.抽离css--->mini-css-extract-plugin
webpack插件使用总结_第1张图片

解决方案:
我认为是最新 mini-css-extract-plugin 版本有错误,我尝试降低版本
yarn add [email protected] -D

webpack插件使用总结_第2张图片

//引入 mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//使用
{
    test: /\.css$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: path.resolve(__dirname, 'dist/style')
            }
        },
        "css-loader"
    ]
}

webpack插件使用总结_第3张图片

webpack插件使用总结_第4张图片

new MiniCssExtractPlugin({
    filename: "style/[name].css",
}),
yarn webpack

webpack插件使用总结_第5张图片

//经过多次尝试 1.2.0 && 0.9.0 可用
yarn add [email protected] -D

or

yarn add [email protected] -D

webpack插件使用总结_第6张图片

webpack插件使用总结_第7张图片

//去掉hash

webpack插件使用总结_第8张图片

100000000.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

你可能感兴趣的:(webpack)