Question

想运行webpack，在使用mini-css-extract-plugin之后，它会在html文件的标题中创建适当的样式表链接，类似于html-webpack-plugin添加适当的JS包（脚本标签）插入html。是否可以让webpack +插件执行此操作，还是我必须手动粘贴样式表标签（在html模板中）？

运行webpack 4.28

Answer 1

我相信这个webpack配置应该可以解决您的问题。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
            { loader: MiniCssExtractPlugin.loader },
            'css-loader',
            'sass-loader'
        ],
      },
    ],
  },
};

当我试图回答相同的问题时，让我理解的重要部分是规则和插件的顺序在webpack中很重要。（webpack首先处理每个数组中的最后一个项目，然后继续直到到达第一个项目为止。此post支持这一点，以及Sean Larkin的前端大师教程。）

在这种情况下，您需要在插件数组中的“ HtmlWebpackPlugin”之后添加“ MiniCSSExtractPlugin”。

当然，您还需要在/ src文件夹中包含sass文件和index.js文件，并且index.js中包含import './style.scss'-在/中还需要index.html如果您要像在配置文件中那样对HtmlWebpackPlugin使用模板选项，请使用src。总共应该输出一个main.css文件，bundle.js文件和一个带有链接和脚本标签的index.html，它们都在“ dist”文件夹中。

希望有帮助！：）

使用webpack将样式表链接动态添加到html中

1 个答案: