Question

当我使用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 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文件中，而不是在js文件中包含CSS。

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

Answer 2

我只是手动将 main.css 文件添加到我的 HTML 中，无需安装任何额外的插件。我对此没有意见，因为该文件从不更改其名称。

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

MiniCssExtractPlugin没有链接到我的HTML文件

2 个答案: