如何将一个大子文件拆分成单独的块中的WebPack 2

Question

我试图导入一个大文件到被分块和2的WebPack一个变丑反应项目。

我们的代码被分成大块大块我们的一个是29MG。我想排除从卡盘大文件，并分装，大型文件。

我怎么可能分裂大文件到它自己的块用的WebPack 2？

我的文件

反应成分导入具有代码的页面导出为PDF JS文件

reactComponent.js -> import createPDF.js

在createPDF我导入的文件，这是非常大的，并且文件我想打出检查。该文件没有受到node_modules。

createPDF.js -> import largeFile.js

我的一些的WebPack配置的

     entry: {
        vendor: [
          'react',
          'react-dom',
          'lodash',
          'moment',
          'underscore',
          'redux-thunk',
          'react-bootstrap-table',
          'react-bootstrap-daterangepicker',
          'react-bootstrap-multiselect',
          'react-bootstrap',
          'react-translate-component'
        ],
        app: [ './index.js' ]
      },
      plugins: [
        // compresses the JS
        new webpack.optimize.UglifyJsPlugin({
          exclude: /^2(.*?)\.js$/i, // exclude the very large file
          compress: { warnings: false },
          sourceMap: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          minChunks: Infinity,
          filename: '[name].[hash].js'
        }),
      ],

是，我可以打出一个文件的方法吗？ TIA！

Answer 1

最后我做这个我不知道，如果是拆分包的正确方法，但它为我工作。

我说我在单独的块中的厂商列表中想要的包。

   entry: {
      vendor: [
        'react',
        'react-dom',
        'lodash',
        'moment',
        'underscore',
        'redux-thunk',
        'react-bootstrap-table',
        'react-bootstrap-daterangepicker',
        'react-bootstrap-multiselect',
        'react-bootstrap',
        'react-translate-component',
        './other/fontPDF',
        './other/fontPDF.map',
        './other/exportCaseToPDF',
        'pdfmake/build/pdfmake'
      ],
      app: [ './index.js' ]
    },

所有的包都进入供应商除了大块是什么其他的文件夹下

    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks(module, count) {
            var context = module.context;
            if (context && context.indexOf('public/newPortal/other') >= 0) {
                return false;
            }
            return true;
        },
        filename: '[name].[hash].js'
    }),

我确信，只有其他的文件夹下的文件被放入新的块

    new webpack.optimize.CommonsChunkPlugin({
        name: 'other',
        minChunks(module, count) {
            var context = module.context;
            return context && context.indexOf('public/newPortal/other') >= 0;
        },
        filename: '[name].[hash].js'
    }),

大文件，我从丑化排除在外，因为它崩溃...

    new webpack.optimize.UglifyJsPlugin({
        exclude: /^other(.*?)\.js$/i,
        compress: { warnings: false },
        sourceMap: true
    }),