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文件有一个.ts文件，每个.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'连接，从而产生多个唯一命名的包E 212，即：

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

有关如何创建输出包的深入说明，请查看输出包的Webpack文献。

话虽如此，您可以从我前面提到的解释中得到一个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页面中。

希望这能帮上忙！