开发者问题收集

webpack 5 错误:未捕获的类型错误:无法设置未定义的属性(设置‘./src/style.css’)

2021-09-29
1943

我开始使用 Webpack 5 构建项目收集器,然后遇到了一个奇怪的错误。第一次运行时,一切都正常,没有错误,但在更新样式后,即使应用了新样式,我也收到错误。我在 webpack.conf.js 中没有发现任何错误

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;

module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.js',
    },
    output: {
        clean: true,
        filename: 'main.js',
        path: path.resolve(__dirname, 'build'),
    },
    devtool: 'inline-source-map',
    devServer: {
        static: './build',
        hot: true,
        port: 9000,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new MiniCssExtractPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                          sourceMap: true,
                        },
                      },
                  ],
            }
        ]
    },
    optimization: {
        minimize: isProd,
        splitChunks: {
            chunks: 'async',
            minSize: 20000,
            minRemainingSize: 0,
            minChunks: 1,
            maxAsyncRequests: 30,
            maxInitialRequests: 30,
            enforceSizeThreshold: 50000,
            cacheGroups: {
              defaultVendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                reuseExistingChunk: true,
              },
              default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true,
              },
            },
          },
    },
};

完整存储库代码链接 https://github.com/likeavenus/webpack-build-2021

2个回答

只需稍微简化样式导入:

之前: 从 “./style.scss”导入 css
之后: 导入“./style.scss”;

import "./style.scss";

import some from './some.js';

some();
if (module.hot) {
    module.hot.accept();
}
Dmitriy Ievlev
2021-09-29

在我的 html 中发现一个错误,我再次将脚本连接到文档

Rafael Shepard
2021-10-19