Webpack 输出太多文件

Question

这是我的 webpack 文件：

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

module.exports = {
  entry: {
    index: './src/js/index.es6.js', // Entry point of your application
    edit: './src/scss/edit.scss',
    style: './src/scss/style.scss'
  },
  mode: 'development', // or 'production'
  output: {
    filename: '[name].js', // Use [name] placeholder to generate unique filenames
    path: path.resolve(__dirname, 'dist') // Output directory
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.svg$/,
        loader: 'file-loader' // or any other loader you want to use for SVG files
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../' // Adjust the public path for CSS files
            }
          },
          'css-loader',   // Turn CSS into CommonJS
          'sass-loader'   // Compile Sass to CSS
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: (pathData) => {
        // Use entry point name for CSS filenames
        return pathData.chunk.name === 'index' ? 'index.css' : `${pathData.chunk.name}.css`;
      }
    })
  ],
  devtool: 'source-map' // Generate CSS source maps
};

这是我的文件结构：

• /src/js/index.es6.js
• /src/scss/edit.scss
• /src/scss/style.scss

我只想输出以下文件：

• /dist/index.js
• /dist/edit.css
• /dist/style.css

但是我得到了额外的文件：

• /dist/index.css
• /dist/edit.js
• /dist/style.js

Answer 1

Webpack 为入口选项中定义的每个资源生成一个 JS 文件。

mini-css-extract-plugin

从条目中定义的SCSS文件中提取CSS，但不消除生成的空JS文件。

要修复它，您可以使用

webpack-remove-empty-scripts

插件。

1. 安装

npm install webpack-remove-empty-scripts --save-dev

2. 在 Webpack 配置中添加插件：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); // <= add it

module.exports = {
  entry: {
    index: './src/js/index.es6.js', // Entry point of your application
    edit: './src/scss/edit.scss',
    style: './src/scss/style.scss'
  },
  // ...
  plugins: [
    // removes the empty `.js` files generated by webpack
    new RemoveEmptyScriptsPlugin(),// <= add it here
    new MiniCssExtractPlugin({
      // ...
    })
  ],
  // ...
};