mini-css-extract-plugin 生成两个额外的 JS 文件答案

【问题标题】：mini-css-extract-plugin generates two additional JS filesmini-css-extract-plugin 生成两个额外的 JS 文件
【发布时间】：2019-12-24 04:25:39
【问题描述】：

我正在使用以下 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){}]]);

我的问题是，为什么要创建这两个附加文件，如何避免这种情况？

提前致谢

【问题讨论】：

我想如果你删除 scss 条目，你就没有这个 exta 文件。这是因为 webpack 是一个 javascript bundler。每个额外的 css 文件都会自动创建一个空的（像你的）js 文件。没有完美的解决方案可以避免它，您可以在操作结束时使用 webpack hooks 事件手动删除它们。

标签： javascript css webpack sass mini-css-extract-plugin

【解决方案1】：

你应该删除这两行

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

您也可以在 index.js 中导入这 2 个 scss 文件

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

mini-css-extract-plugin 会为您处理剩下的事情

【讨论】：

【解决方案2】：

作为替代方案，如果您不想在 js 文件中导入 scss 文件，我发现您可以在 webpack.config.js 文件中使用 webpack 插件，例如 Ignore Emit Webpack 来防止创建额外的 js文件：

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

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

【讨论】：