当我使用 MiniCssExtractPlugin 对我的项目进行 Webpack 以将 css 分离为文件时，它会创建 main.css 文件，但从不将链接写入我的 html 文件。
这是我的 webpack.config.js ：
const webpack = require("webpack");
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const dev = process.env.NODE_ENV ==="dev"
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
let cssloaders = [MiniCssExtractPlugin.loader, {loader: 'css-loader', options:{importLoaders: 2, modules: true } } ]
if(!dev) {
cssloaders.push( {
loader: 'postcss-loader',
options : {
plugins: (loader) => [
require('autoprefixer')( { browsers : ['last 2 versions', 'ie > 8']
}),
]
},
})
}
let config = {
mode : 'none',
entry: "./assets/js/app.js" ,
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js",
publicPath: "/wp/dist/"
},
devtool : dev ? "cheap-module-eval-source-map" : "source-map",
watch : dev,
module : {
rules : [
{
test : /\.js$/,
exclude: /(node_modules|bower_components)/,
use : [
'babel-loader'
]
},
{
test : /\.css$/,
use: cssloaders
},
{
test : /\.scss$/,
use:
[
...cssloaders,
'sass-loader'
]
,
},
]
},
plugins : [
new MiniCssExtractPlugin({
filename : '[name].css',
chunkFilename: "[id].css"
})
],
optimization : {
minimize : !dev
}
}
if(!dev){
config.plugins.push(new UglifyJsPlugin({
sourceMap : true
}))
}
module.exports = config;
所以加载器的顺序是正确的：postcss-loader（如果不在 dev 中）、sass-loader（用于 scss 测试）、css-loader 和 MiniCssExtractPlugin。
当我 webpack 时，main.css 文件很好地发出了，但是 html 文件的头部没有链接 href ......所以没有 css :-)
bundle.js 4.85 KiB 0 [emitted] main
main.css 67 bytes 0 [emitted] main
我想我错过了什么？
先感谢您 ！