webpack中loader找不到

Question

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MinniCssexarctPlugin = require('mini-css-extract-plugin')

module.exports = {

    //入口
    entry: {
        index: './src/js/index.js',
        login: './src/js/login.js',
    },



    //输出
    output: {
        //文件名
        filename: '[name].js',
        //路径：绝对路径
        path: path.resolve(__dirname, './dist'),
        // 每次打包先清楚dist文件夹
        clean: true,
    },

    //资源管理  加载器
    module: {
        //资源的匹配的规则
        rules: [
            {
                test: '/\.css$/',
                use: [
                    MinniCssexarctPlugin.loader,
                    "css-loader",
                ],
                generator: {
                    filename: 'css',
                }
            }
        ]
    },

    plugins: [
        new MinniCssexarctPlugin(),

        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
            filename: 'html/index.html',
            chunks: ["index"]
        }),

        new HtmlWebpackPlugin({
            template: './src/login.html',
            inject: 'body',
            filename: 'html/login.html',
            chunks: ["login"]
        }),


    ],

    //模式:开发模式，生产模式
    mode: "development",
}

报错信息

ERROR in ./src/css/index.css 1:0

Module parse failed: Unexpected token (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Answer 1

错误提示信息说没有找到适当的 loader 来处理 CSS 文件。请检查你的 webpack 配置是否已安装并配置了 CSS 相关的加载器，比如 css-loader 和 mini-css-extract-plugin。

在你的 webpack 配置中，你需要安装并配置这两个加载器：

npm install css-loader mini-css-extract-plugin --save-dev

然后在 webpack 配置文件中的 rules 中添加对 CSS 的支持：

{
  test: /\.css$/,
  use: [
    MinniCssexarctPlugin.loader,
    "css-loader"
  ],
  generator: {
    filename: 'css',
  }
}