使用MiniCssExtractPlugin打包后HTML未自动引入main.css

你遇到的问题很典型：MiniCssExtractPlugin只负责把CSS从JS中提取成独立文件，但它没有自动向HTML注入<link>标签的能力。Webpack本身不会主动处理HTML文件，所以需要配合html-webpack-plugin来完成资源自动注入的工作。

解决步骤 #

1. 安装html-webpack-plugin
   首先在项目中安装这个必备插件：

   npm install html-webpack-plugin --save-dev
   

2. 修改webpack.config.js配置
   在你的配置文件中引入插件，并添加到plugins数组里，让它自动生成/更新HTML并注入资源：

   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')
   // 新增：引入html-webpack-plugin
   const HtmlWebpackPlugin = require('html-webpack-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" }),
     // 新增：添加HtmlWebpackPlugin配置
     new HtmlWebpackPlugin({
       // 如果你有自定义HTML模板，可指定路径，比如：template: './src/index.html'
       // 无模板时插件会生成默认HTML文件
       filename: 'index.html', // 生成的HTML文件名
       inject: 'head' // 资源注入到<head>标签，也可选择注入到<body>末尾
     })
    ],
    optimization : {
     minimize : !dev
    }
   }
   if(!dev){
    config.plugins.push(new UglifyJsPlugin({ sourceMap : true }))
   }
   module.exports = config;
   

3. 重新打包验证
   执行Webpack打包命令后，dist目录下会生成index.html（或你指定的模板文件），里面会自动包含：

   • <script src="/wp/dist/bundle.js"></script>
   • <link href="/wp/dist/main.css" rel="stylesheet">

额外注意事项 #

• 如果你已有自定义HTML模板，不要手动写死bundle.js和main.css的引用，否则会出现重复注入的情况。
• 你的publicPath配置为/wp/dist/，生成的资源引用路径会遵循这个设置，请确保服务器上的资源存放路径与该配置一致。

内容的提问来源于stack exchange，提问作者jska13