使用webpack将大的.js文件拉入自己的块中

我正在写一个我用它创建的单页应用程序。它加载一个非常大的单词列表文件，

scrabble dictionary.js

，该文件永远不会更改。每次我对代码的其他部分进行更改时，编译都会花费很长时间，所以我想把那个大文件拉到它自己的编译块中

据我所知，如果不运行

npm run eject

，就无法让create react app执行此操作，它会将所有配置文件取出，以便您可以编辑它们

现在我有了一个

webpack.config.dev.js

文件。我以前用过webpack，但已经有几年了，所以我相当生疏了。我尝试添加多个入口点：一个用于

index.js

，这是CreateReact应用程序默认添加的入口点，另一个用于我的单词列表文件。奇怪的是，webpack生成了两个完全相同的文件，它们是整个应用程序，包括index.js的代码和单词列表文件

默认情况下（在运行

npm run eject

之后），网页包配置文件如下所示：

// ...
module.exports = {
  devtool: 'cheap-module-source-map',
  entry: [
    require.resolve('react-dev-utils/webpackHotDevClient'),
    require.resolve('./polyfills'),
    paths.appIndexJs
  ],
  output: {
    // Next line is not used in dev but WebpackDevServer crashes without it:
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/bundle.js',
    publicPath: publicPath
  },
  // ...
};

我扩充了我的

path.js

文件，包括：

module.exports = {
  // ...
  // custom entry points
  appWordsJs: resolveApp('src/scrabble-dictionary.js'),
};

然后我将

webpack.config.dev.js

更改为

// ...
module.exports = {
  // ...
  entry: {
    webpackHotDevClient: [require.resolve('react-dev-utils/webpackHotDevClient')],
    vendor: [require.resolve('./polyfills')],
    main: [
        // Finally, this is your app's code:
        paths.appIndexJs
      ],

    dictionary: [paths.appWordsJs],
  },
  output: {
    // Next line is not used in dev but WebpackDevServer crashes without it:
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/[name].js',
    publicPath: publicPath,
    plugins: [ new webpack.optimize.CommonsChunkPlugin('dictionary', paths.appWordsJs)]
  },
// ...

我是否包含

插件

似乎没有什么区别

我还尝试将

dictionary

设置为

[require.resolve（uu dirname+'/../src/scrabble dictionary.js'）]

，结果相同