如何防止Webpack生成.js文件？

Question

我正在尝试使用 Webpack 迭代一些

scss

文件并从中创建

css

文件。该程序正在运行并生成文件，但它抛出一个

Multiple assets emit to the same filename name.css

错误。

我相信这是因为

MiniCssExtractPlugin

与 Webpack 的

output

发生冲突。有什么想法我该如何禁用它？或者至少阻止生成

js

文件？

当前的webpack.config.js：

const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const setEntryPoints = (themes = {}) => {
  fs.readdirSync(path.join(__dirname, 'src')).forEach(file => {
    themes[file.slice(0, -5)] = path.join(__dirname, 'src', file)
  })
  return themes
}

const themes = setEntryPoints();

module.exports = {
  mode: "development",
  entry: themes,
  output: {
    filename: '[name].css',
    path: path.join(__dirname, 'dist')
  },
  module: {
  // Add loader
  rules: [{
      test: /\.(scss)$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader', 'sass-loader'
      ]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    })
  ],
};

Answer 1

这样做。可能会正常工作

entry: {
  app: [
    path.resolve(__dirname, 'src/pug/app.pug'),
    path.resolve(__dirname, 'src/js/app.js'),
    path.resolve(__dirname, 'src/scss/app.scss')
  ]
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'js/[name].js'
},

您对提取文本插件中的文件名执行与 output.filename 相同的操作：

const extractHtml = new ExtractTextPlugin({
  filename: 'html/[name].html'
});

const extractScss = new ExtractTextPlugin({
  filename: 'css/[name].[contenthash].css',
  allChunks: true
});

Answer 2

从 Webpack 5.90.3 开始，如果您在输出对象的 filename 属性中指定空函数，则不会生成 .js 文件：

output: {
    filename: () => {},
    path: path.resolve(__dirname),
    iife: false
},