CommonsChunkPlugin中的webpack错误:在正常模式下运行时,不允许使用非条目块

Question

所以当我尝试将我的应用程序拆分为1个application.js文件和1个libraries.js文件时,一切正常.当我尝试将其拆分为1个application.js文件和2个libraries.js文件时,构建时出现此错误:

ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (libraries-react)

有谁知道可能导致此错误的原因？

我对webpack的配置是

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var extractSass = new ExtractTextPlugin('main.css');

module.exports = {
    module: {
        loaders: [{
            test: /\.jsx$/,
            loader: 'babel',
            exclude: ['./node_modules'],
            query: {
                presets: ['react', 'es2015']
            }
        }, {
            test: /\.scss$/,
            loader: extractSass.extract(['css', 'sass'])
        }, {
            test: /\.html$/,
            loader: 'file?name=[name].[ext]'
        }, {
            test: /\/misc\/.*\.js$/,
            loader: 'file?name=/misc/[name].[ext]'
        }, {
            test: /\.(png|jpg|jpeg|)$/,
            loader: 'file?name=/images/[name].[ext]'
        }]
    },
    plugins: [
        extractSass,
        new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js'),
        new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js')
    ],
    entry: {
        //3rd party libraries
        'libraries-core': [
          'lodash',
          'superagent',
          'bluebird',
          'eventemitter3',
          'object-assign',
          'schema-inspector',
          'jsuri',
          'store-cacheable',
          'immutable'
        ],

        'libraries-react': [
          'react',
          'react-dom',
          'react-router',
          'nucleus-react'
        ],

        //application code
        application: './web/app/application.jsx',

        //mocks
        'mocked-api': './web/app/mock/api.js',
        'mocked-local-storage': './web/app/mock/local-storage.js'
    },
    output: {
        path: './web/build',
        publicPath: '/build',
        filename: '[name].js'
    }
}

Answer 1

在github问题#1016之后,你需要颠倒插件定义中关于入口点定义的块名称的顺序

这个webpack插件暂时似乎是个bug ...

new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js')
new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js')

要么

new webpack.optimize.CommonsChunkPlugin({names: ['libraries-react', 'libraries-core'], filename: '[name].js')

Answer 2

在我的案例中,从CommonChunkPlugin的两个条目切换到单个条目.

之前:

plugins: [
    new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js'),
    new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js')
]

后:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['libraries-core', 'libraries-react'],
      minChunks: Infinity
   })
]

它基于两个显式供应商块的例子.

Answer 3

其他答案讨论了CommonsChunkPlugin中名称的顺序,这是正确的.但有时即使你纠正了订单(即在条目中给出的顺序的反转),webpack仍然可能会抛出相同的错误.

这是当你使用另一个CommonsChunkPlugin实例来提取公共资源时 - 例如.explicit-webpack-runtime-chunk,顺序也很重要 - 这里是config的插件列表中的实例顺序.简单地说,在CommonsChunkPlugin之后将此实例移动到显式供应商块.例如,

plugins: [
  // explicit-vendor-chunk
  new CommonsChunkPlugin({
    names: ["vendor-2", "vendor-1"],
    minChunks: Infinity
  }),

  // and the following should go after explicit-vendor-chunk
  // in the list of plugins

  // explicit-webpack-runtime-chunk
  new CommonsChunkPlugin({
    name: "manifest", // something that's not an entry
    minChunks: Infinity
  })
]