のWebPACK 2：別のファイルに分割するライブラリ、ベンダーやアプリ

Question

は私がlodash、瞬間、axiosを含むサードパーティのモジュールの多くを使用するリッチアプリケーションを、持っている想像し、はを反応させます。

最後にすべてを1つのバンドルにバンドルすると、サイズは1MBより大きくなります。

私はそれが格納されている方法で私のライブラリをパックするのWebPACK、欲しい：

1. lodashは別途
2. 瞬間別途
3. 他のすべてのnode_modulesは、ベンダーの下に格納されていますバンドル
4. アプリケーションのコードは別ファイル
に保存されています

私はCommonsChunkPluginでプレーしようとしましたが、私は欲しい結果を受け取ったことがありません。

私は私の問題を説明するために例のリポジトリを用意しました。ここで https://github.com/PavelPolyakov/webpack-react-bundles

WebPACKのエントリの一部（conf/webpack.base.config.js):

entry: { 
    lodash: 'lodash', 
    moment: 'moment', 
    app: [ 
     'react-hot-loader/patch', 
     'webpack-dev-server/client?http://localhost:3001', 
     'webpack/hot/only-dev-server', 
     './app/index.js'] 
} 

は、モジュールを分離しようとすると、生産の設定（conf/webpack.production.config.js）です：

plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production') 
      } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: function (module) { 
       // this assumes your vendor imports exist in the node_modules directory 
       return module.context && 
        module.context.indexOf('node_modules') !== -1; 
      } 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      minimize: true, 
      compress: { 
       warnings: true 
      } 
     })] 

このケースでは、瞬間とロダッシュは引き続き販売業者に表示されますまたはバンドル。私はそれらを2つの別々のバンドルに入れたいと思っています。

感謝しています。

Answer 1

CDNから入力してexternalを使用するのが最も簡単です。

これは定義コード分割ではなく、達成しようとしているものに近いかもしれません。バンドルサイズを縮小します。一部のユーザーには、別のサイトから既にキャッシュされているCDNバージョンを使用する利点があります。私はgithubの問題に@sokraから支援を受け終わり

Answer 2

：ここでは、同じ問題に直面するであろう人たちのために https://github.com/webpack/webpack/issues/4638

は質問に記載されている問題を解決し、完全なWebPACKのコンフィグは次のとおりです。

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: { 
     app: ['./app/index.js'] 
    }, 
    output: { 
     filename: '[name].bundle.js', 
     sourceMapFilename: '[name].bundle.map', 
     path: path.resolve(__dirname, './dist') 
    }, 
    devServer: { 
     port: 3001, 
     contentBase: path.resolve(__dirname, './dist'), 
     historyApiFallback: true 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       use: [ 
        { 
         loader: 'babel-loader', 
         options: { 
          presets: [['es2015', { 'modules': false }], 'react'], 
          plugins: ['transform-async-to-generator', 
           'transform-decorators-legacy', 
           'transform-runtime', 
           'react-html-attrs', 
           'react-hot-loader/babel'], 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.css/, 
       use: ['style-loader', 'css-loader', 'postcss-loader'] 
      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2|gif|jpg|png)$/, 
       use: 'file-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './index.html', 
      inject: "body" 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      minimize: true, 
      compress: { 
       warnings: true 
      } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: (m) => /node_modules/.test(m.context) 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'lodash', 
      minChunks: (m) => /node_modules\/(?:lodash|moment)/.test(m.context) 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'moment', 
      minChunks: (m) => /node_modules\/(?:moment)/.test(m.context) 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: "manifest", 
      minChunks: Infinity 
     }) 
    ], 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    devtool: 'source-map' 
} 

お手数をおかけしていただきありがとうございます。