MiniCssExtractPlugin 没有链接到我的 html 文件答案

【问题标题】：MiniCssExtractPlugin doesn't link with my html fileMiniCssExtractPlugin 没有链接到我的 html 文件
【发布时间】：2019-12-07 16:51:06
【问题描述】：

当我使用 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

我想我错过了什么？

提前谢谢你！

【问题讨论】：

标签： css webpack sass mini-css-extract-plugin

【解决方案1】：

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

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

【讨论】：

它在文档中说它将链接元素注入到 DOM 中。回答时不是这样吗？
@RichardSimões 如果您指的是有关insert 选项的文档，我也发现这很令人困惑。密切注意 - 他们表示它是（单独的）extract-css-chunks-plugin 插件，它附加了链接元素。如果我没看错，如果您不使用块插件，您将不会获得链接插入行为。不过，我不确定为什么在 MiniCssExtractPlugin 中公开并记录了该选项。

【解决方案2】：

我只是手动将main.css 文件添加到我的 HTML 中，而无需安装任何额外的插件。我可以接受，因为该文件永远不会更改其名称。

<link rel="stylesheet" href="/public/css/main.css">

【讨论】：

缓存破坏和分块怎么样？