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
});

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

1 个答案: