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,
},
},
},
},
};
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