Webpack SCSS 配置

Question

我有以下 webpack 设置：

let config= {
    mode: 'development',
    entry:  {
        'templates': '/usr/local/var/www/project/src/ts/entry/templates.ts',
        'templates2': '/usr/local/var/www/project/src/ts/entry/templates2.ts',
        'main_scss': '/usr/local/var/www/project/src/sass/entry/main_scss.scss',
        'templates': '/usr/local/var/www/project/src/sass/entry/templates.scss'
    },
    output: {
        path:  path.resolve(__dirname, 'public/assets'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(ts)$/,
                use: [
                    'ts-loader',
                ],
            },
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],

            },
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: "[name].css",
        })
    ]


};

结果是一个文件夹，其中每个 .ts 文件都有一个 .js 文件，每个 .scss 文件有 2 个文件。 （main_scss.scss 产生 main_scss.bundle.js 和 main_scss.css）

为什么？我希望 .scss 文件仅捆绑到 .css 中。

谢谢 亚龙

Answer 1

这是因为您指定了多个输出包，即每个入口点有一个包。此外，每个包必须具有唯一的名称，基于每个入口点的文件名，用这行代码指定：

filename: '[name].bundle.js'.

'[name]' 将动态替换 每个入口点的基础文件名，即：templates、templates2、main_scss 和 templates（用于您的样式）并将其与'bundle.js' 导致多个唯一命名的包，即：

1. templates.bundle.js
2. templates2.bundle.js
3. main_scss.bundle.js

如需深入了解如何创建输出包，请查看Webpack's documentation 以获取输出包。

话虽如此，你从我上面提到的解释中得到一个main_scss.bundle.js，你从你的MiniCssExtractPlugin 插件中得到一个main_scss.css 样式文件。 MiniCssExtractPlugin 正在提取您的 SASS 文件并将它们转换为等效的 CSS 文件。您正在使用这行代码指定此 SASS 到 CSS 提取：

plugins:[
        new MiniCssExtractPlugin({
            filename: "[name].css",
        })
    ]

注意[name] 在这里再次使用，因此每个生成的CSS 文件也将根据每个SASS 文件的基础文件名唯一命名。如果您只是希望捆绑包含您的 JavaScript 文件并生成单个 CSS 文件，我会尝试以下操作：

1. 创建一个不是基于每个入口点的文件名唯一命名的单个包，类似于以下内容：

   output: { path: path.resolve(__dirname, 'public/assets'), filename: 'bundle.js' },

2. 删除多个 CSS 入口点，改为创建单个 main.scss 文件。此文件的唯一目的是导入您项目的所有其他 SASS 文件。

3. 将此在步骤 2 中创建的文件添加为入口点。

这将产生一个 JavaScript 包：bundle.js 和一个 CSS 文件：main.css，其中将分别包含所有应用程序的 JavaScript 和样式。您可以简单地将您生成的JavaScript 捆绑包和相应的CSS 文件链接到您的index.html 页面中。

希望对您有所帮助！