webpack高版本抽离css样式报错[已解决]

转载

mob604756fa220f 2021-08-21 00:28:00

文章标签 css bundle javascript 调用顺序 ide 文章分类 Webpack 前端开发

全局安装的webpack版本是5.51.1,webpack-cli是4.9的版本;

本来想用 extract-text-webpack-plugin 的,但是报错了,查了一下文档

发现,已经不支持新版本的webpack了,然后推荐使用 mini-css-extract-plugin

npm install -D mini-css-extract-plugin

然后装完了之后,再次打包，仍然报错：

// mini-css-extract-plugin Cannot find module 'webpack/lib/util/identifier'

查阅了一番资料也没查到结果,最后考虑到有可能是webpack版本过高的原因????,遂抱着试一试的心态降低webpack版本至5.10.0,
然后打包成功：

webpack 配置如下：

const { resolve } = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/**
 *
 * @tips
 * loaders 的调用顺序是从右往左的
 * css-loader的minimize属性在2018年7月被移除了
 * css-loader的作用是从.css文件中读取内容
 * style-loader的作用是在网页执行JavaScript时候通过DOM操作,将style标签动态插入到head里
 * 除了在配置中使用之外,也可以直接在源码中指定使用什么Loader去处理文件;eg:require('style-loader!css-loader!./demo.css');
 */

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: resolve(__dirname, "./build"),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: ["style-loader", "css-loader"],
                use: [MiniCssExtractPlugin.loader,'css-loader'],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename:'[name]_[hash].css'
        }),
    ],
};

main.js如下：