0

我有以下 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 中。

谢谢亚龙

4

1 回答 1

1

这是因为您已指定有多个输出包，即每个入口点一个包。此外，每个包都将根据每个入口点的文件名唯一命名，如以下代码行所指定：

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

'[name]'将动态替换每个入口点的底层文件名，即：templates、、、和（用于您的样式）并将其与 with 连接，从而产生多个唯一命名的 bundles，即：templates2main_scsstemplates'bundle.js'

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

有关如何创建输出包的深入解释，请查看Webpack 的输出包文档。

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

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。

希望这会有所帮助！

于 2019-03-10T18:49:06.773 回答