MiniCssExtractPlugin 不与我的 html 文件链接

Question

当我 Webpack 我的项目使用 MiniCssExtractPlugin 将 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（如果不在开发中）、sass-loader（用于 scss 测试）、css-loader 和 MiniCssExtractPlugin。

当我 webpack 时，main.css fil 很好地发出，但是 html 文件的头部没有写链接 href ......所以没有 css :-)

bundle.js  4.85 KiB       0  [emitted]  main
 main.css  67 bytes       0  [emitted]  main

我想我错过了什么？

先感谢您 ！

Answer 1

这是正常行为，因为 mini-css-extract-plugin 只帮助您将 css 提取到单独的 css 文件中，而不是将 css 包含在 js 文件中。

您需要使用html-webpack-plugin将您的 css 包含到 html 中，否则您必须手动在 html 中添加 css