3

次のwebpack.config.jsファイルを使用して、2 つの 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.js2 つの JS ファイルを取得しています。0.block.build.js2.block.build.js

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

私の質問は、これらの 2 つの追加ファイルが作成されるのはなぜですか? また、これを回避するにはどうすればよいですか?

前もって感謝します

4

2 に答える 2

3

これらの2行を削除する必要があります

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

また、これらの 2 つの scss ファイルを index.js にインポートすることもできます

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

あとは mini-css-extract-plugin が面倒を見てくれます

于 2019-08-19T13:55:38.163 に答える