mini-css-extract-plugin 生成兩個額外的 JS 文件

Question

我正在使用以下webpack.config.js文件構建兩個 CSS 文件（editor.css 和 style.css）和一個使用mini-css-extract-plugin插件的 JS 文件（block.build.js）：

// Load webpack for use of certain webpack tools and methods
const webpack = require( 'webpack' );
// For extracting CSS (and SASS) into separate files
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

// Define JavaScript entry points
const entryPointNames = [ 'blocks', 'frontend' ];

// Setup externals
const externals = {};
// Setup external for each entry point
entryPointNames.forEach( entryPointName => {
  externals[ '@/lg6' + entryPointName ] = {
    this: [ 'lg6', entryPointName ]
  }
} );

// Define WordPress dependencies
const wpDependencies = [ 'components', 'element', 'blocks', 'utils', 'date' ];
// Setup externals for all WordPress dependencies
wpDependencies.forEach( wpDependency => {
  externals[ '@wordpress/' + wpDependency ] = {
    this: [ 'wp', wpDependency ]
  };
});

// Start of main webpack config
const config = {
  // Set mode
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  // Go through each entry point and prepare for use with externals
  entry: {
      index: './index.js',
      style: './style.scss',
      editor: './editor.scss',
  },
  // Include externals
  externals,
  // Set output
  output: {
    // Place all bundles JS in current directory
    filename: 'block.build.js',
    path: __dirname,
    library: [ 'pluginnamespace', '[name]' ],
    libraryTarget: 'this'
  },
  // Fall back to node_modules for file resolution
  resolve: {
    modules: [ __dirname, 'node_modules' ]
  },
  optimization: {
    splitChunks: {
        cacheGroups: {
            editor: {
                name: 'editor',
                test: /editor\.(sc|sa|c)ss$/,
                chunks: 'all',
                enforce: true,
            },
            style: {
                name: 'style',
                test: /style\.(sc|sa|c)ss$/,
                chunks: 'all',
                enforce: true,
            },
            default: false,
        },
    },
  },
  module: {
    rules: [
      {
        // Run JavaScript files through Babel
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        // Setup SASS (and CSS) to be extracted
        test: /\.(sc|sa|c)ss$/,
        exclude: /node_modules/,
        use: [
            {
                loader: MiniCssExtractPlugin.loader,
            },
            {
                loader: 'css-loader',
                options: {
                    sourceMap: process.env.NODE_ENV !== 'production',
                },
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: [ require( 'autoprefixer' ) ]
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: process.env.NODE_ENV !== 'production',
                },
            },
        ],          
      },
    ]
  },
  plugins: [
    // Setup environment conditions
    new webpack.DefinePlugin( {
      'process.env.NODE_ENV': JSON.stringify(
        process.env.NODE_ENV || 'development'
      )
    } ),
    new MiniCssExtractPlugin( {
        filename: './css/[name].css',
    } ),
    // For migrations from webpack 1 to webpack 2+
    new webpack.LoaderOptionsPlugin( {
      minimize: process.env.NODE_ENV === 'production',
      debug: process.env.NODE_ENV !== 'production',
    } )
  ],
  // Do not include information about children in stats
  stats: {
    children: false
  }
};

module.exports = config;

一切都按預期工作，但出於某種原因，除了block.build.js文件之外，我還得到了兩個名為0.block.build.js和2.block.build.js JS 文件，其內容如下：

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,function(n,w,o){}]]);

我的問題是，為什么要創建這兩個附加文件，我該如何避免這種情況？

提前致謝

Answer 1

你應該刪除這兩行

  style: './style.scss',
  editor: './editor.scss',

您也可以在 index.js 中導入這兩個 scss 文件

import "style.scss";
import "editor.scss";

而 mini-css-extract-plugin 將為您處理剩下的事情

Answer 2

作為替代方案，如果你不希望導入你的js文件的SCSS文件，我發現您可以使用的WebPack插件如忽略的Emit的WebPack在webpack.config.js文件，以防止額外的js文件的創建：

const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new IgnoreEmitPlugin(['0.block.build.js', '2.block.build.js'])
    ]
    // ...
};