Webpack 网页包SCSS配置

我有以下网页包设置：

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文件有两个文件。 main_scss.scss生成main_scss.bundle.js和main_scss.css

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

谢谢 Yaron

这是因为您指定了多个输出捆绑包，即每个入口点一个捆绑包。此外，根据以下代码行指定的每个入口点的文件名，每个捆绑包都要有唯一的名称：

文件名：'[name].bundle.js'

“[name]”将动态替换每个入口点的基础文件名，即：模板、模板2、主SCS和样式模板，并将其与“bundle.js”连接，从而生成多个唯一命名的bundle，即：

templates.bundle.js templates2.bundle.js main_scss.bundle.js 有关如何创建输出捆绑包的深入解释，请查看输出捆绑包

如上所述，从我的上述解释中可以得到一个main_scss.bundle.js，从MiniCssExtractPlugin插件中可以得到一个main_scss.css样式文件。MiniCssExtractPlugin正在提取您的SASS文件并将其转换为等效的CSS文件。您正在使用以下代码行指定此SASS到CSS提取：

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

请注意，此处再次使用[name]，因此每个生成的CSS文件也将根据每个SASS文件的基础文件名进行唯一命名。如果您只希望捆绑包包含JavaScript文件并生成单个CSS文件，我将尝试以下方法：

创建一个不是基于每个入口点的文件名唯一命名的包，如下所示：

输出：{ 路径：path.resolve__dirname，“公共/资产”， 文件名：“bundle.js” },

删除多个CSS入口点，而是创建一个main.scss文件。此文件的唯一用途是导入项目的所有其他SASS文件

添加在步骤2中创建的此文件作为入口点

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

---

希望这有帮助

如何为MinicsSextract插件指定入口点？我想我应该把所有的入口点都放在一个地方，然后使用“规则”测试正确的加载器。感谢您的帮助。是的，您是正确的，但问题在于您如何创建独特的捆绑包。我要做的是创建一个main.scss文件，它只是为您的项目导入所有其他sass文件。然后将此文件添加到您的条目列表中，当MiniCssExtractPlugin运行时，它会将所有样式导出到由文件名键中指定的文件名提供的等效css文件中。因此，无法使用webpack创建多个.scss包-每个页面一个？是的，使用[name]参数，并将希望成为捆绑包的每个.scss文件添加为入口点。然后只需确保作为入口点包含的每个.scss文件的名称都是唯一的。也许这是一个有用的资源：我不明白您的意思是将相应的.scss文件作为每个.ts入口点的导入。。那很有效，谢谢你！