1

我在项目的 dist 文件夹中生成多个 *.html 文件（使用file-loader复制）。styles.css的导入（从我的 src 文件夹中的 scss 文件生成）存在于生成的index.html中，但不在位于我的src/pages中的其他生成的 html 文件中（并且也在dist文件夹中生成）。

如何在所有生成的 html 文件中添加 styles.css 导入，甚至在所有目标 html 文件中添加更好？

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); // to minify JS
module.exports = {

    entry: ['@babel/polyfill', './src/js/index.js'],
    output: {

        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'

    },
    devServer: {

        contentBase: './dist'

    },
    optimization: {
        //https://webpack.js.org/plugins/mini-css-extract-plugin/
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    output: {
                      comments: /@license/i,
                    },
                  },
                extractComments: false,
            }),
            new OptimizeCSSAssetsPlugin({})
        ], // utilisés pour minifier le css généré en Production
        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              test: /\.s[ac]ss$/i,
              chunks: 'all',
              enforce: true,
            },
          },
        },
    },
    plugins: [
        new HtmlWebpackPlugin({

            filename: 'index.html',
            template: './src/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: false
            }
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new CopyPlugin([
            { from: './src/assets/images', to: 'assets/images' },
            //{ from: 'other', to: 'public' },
        ]),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(html)$/i,
                loader: 'html-loader',
                options: {
                    attributes: false,
                    interpolate: true,
                },
            },
            {
                test: /\.s[ac]ss$/i,
                use: [

                    {loader: MiniCssExtractPlugin.loader},

                    //'style-loader',

                    {
                        loader: 'css-loader',
                        options: { 
                            importLoaders: 1
                        }
                    },

                    'postcss-loader',

                    'sass-loader',

                ],
            },
            {
                test: /\.svg/,
                use: {
                    loader: 'svg-url-loader',
                    options: {}
                }
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                      name: '[name].[ext]',
                      outputPath: 'assets/images',
                      esModule: false,
                    }
                  }
                ]
            },
            {
                test: /\.html$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                },
                exclude: [
                    path.resolve(__dirname, 'src/index.html'),
                    path.resolve(__dirname, 'src/fragments')
                ]
            },
        ]
    }
};

提前感谢您的帮助。

4

0 回答 0