3

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

// 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文件之外，我还获得了另外两个命名为以下内​​容的 JS0.block.build.js文件2.block.build.js：

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

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

提前致谢

4

2 回答 2

3

你应该删除这 2 行

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

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

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

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

于 2019-08-19T13:55:38.163 回答
1

作为替代方案，如果您不想在 js 文件中导入 scss 文件，我发现您可以在文件中使用诸如 Ignore Emit Webpack 之类的 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'])
    ]
    // ...
};
于 2019-08-25T08:16:11.073 回答