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

Question

我正在尝试使用Webpack迭代几个scss文件并scss创建css文件。 该程序正在运行并生成文件，但是它Multiple assets emit to the same filename name.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
});