我尝试使用 Webpack5 + MiniCssExtractPlugin + html-webpack-plugin 和其他插件构建生产环境,但我无法将 css 标签包含在 index.html 中。
每次 css 文件由 javascript 附加时,都会出现“无样式内容的闪存”(FOUC) 问题。
我使用npm run build和这个简单的命令:webpack --config webpack.prod.js
webpack.prod.js
const path = require('path');
const common = require('./webpack.config');
const { merge } = require('webpack-merge');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(common,{
mode: 'production',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '',
filename: '[name].[hash].js',
},
plugins: [
new CleanWebpackPlugin({}),
new MiniCssExtractPlugin({
filename:'[name].[hash].css'
})
],
module: {
rules: [
{
test: /\.css$/i,
use: …Run Code Online (Sandbox Code Playgroud)