Javascript 如何将JS和CSS文件与Webpack独立绑定？

我有一些JS和SCSS文件。我需要Webpack4将每个JS条目绑定到一个JS文件中，并将每个SCSS条目绑定到一个CSS文件中。JS文件不导入SCSS文件。我尝试使用以下

webpack.config.js

：

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

module.exports = {
  entry: {
    scriptFoo: './src/js/scriptFoo.js',
    scriptBar: './src/js/scriptBar.js',
    // ...
    styleBaz: './src/css/styleBaz.scss',
    styleBaq: './src/css/styleBaq.scss'
    // ...
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};

它工作正常，Webpack将编译的文件放入

dist

目录。但它也会为

dist

目录中的每个SCSS文件创建一个多余的伪JS文件：

webpack.config.js
src/
  js/
    scriptFoo.js
    scriptBar.js
    ...
  css/
    styleBaz.scss
    styleBaq.scss
    ...
dist/
  scriptFoo.js
  scriptBar.js
  ...
  styleBaz.css
  styleBaz.js // Excess
  styleBaq.css
  styleBaq.js // Excess
  ...

---

如何使Webpack不创建多余的JS文件？

这是因为对于entry对象中的每个属性，JS文件都是在输出目标中创建的

输出：{
文件名：'[name].js'，
path:path.resolve（uu dirname，'dist'）
}，

当css是一个入口点时创建虚拟js的Webpack是一个已知的bug，目前尚未修复

条目配置中有多个条目文件也会影响树划功能

使用Webpack插件不要创建多余的文件。首先通过在控制台中运行来安装它：

npm安装--保存dev ignore emit webpack插件

然后将其添加到您的网页包配置中：

const IgnoreEmitPlugin=require（'ignore-emit-webpack-plugin'）；
module.exports={
// ...
插件：[
// ...
新建IgnoreEmitPlugin（['styleBaz.js'，'styleBaq.js']）//或者简单地说：新建IgnoreEmitPlugin（/^style.*\.js$/）
]
};

理论上，每个css都应该包含在使用的位置，或者如果它在入口点内是全局的。当css是一个入口点时创建虚拟js的Webpack是一个已知的bug，目前尚未修复。那要看他们了，谢谢。您解释了创建虚拟文件的原因，但没有回答问题（如何不创建它们）。这是一个荒谬的问题和解决方案。不是你的错，只是它的方式。。。Webpack已经有这个问题很多年了。@ChrisHawkes，Webpack有它的逻辑来解释一切（尽管它不是直观的）。一般来说，Webpack将输入JavaScript文件组合成输出JavaScript文件，这就是为什么总是发出JS；它可以通过加载程序（将非JS文件转换为JS的组件）和插件（执行不同的操作，如将CSS提取到单独的输出文件或删除输出文件）进行扩展。实际上，将SCS从单个条目转换为CSS并不是Webpack的设计目的，但由于我的项目的其余部分是使用Webpack构建的，因此我也决定使用Webpack。