webpack2でバンドルを最小化する

Question

バンドルファイルと使用されているすべてのモジュールを最小限に抑えることは可能ですか？私はjavascriptでインポートを使用しますが、インポートされたjsファイルもすべて最小化するようwebpackします。これは、インポートされた外部ライブラリから未使用のコードをすべて削除することを意味します。これは可能ですか？特にプロットは本当に大きなlibrarieですが、私は円グラフのみを使用します。私のバンドルはすべてのコードをプロットから必要とは思わない。

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

const config = { 
    entry: 
    { 
     cash: './js/page/cash.js' 
    }, 
    output: 
    { 
     filename: "[name].bundle.js", 
     path: path.resolve(__dirname, 'dist') 
    }, 
    resolve: 
    { 
     modules: [ 
      path.resolve(__dirname, 'js') 
     ], 
     alias : { 
      knockout: path.resolve(__dirname, 'js/knockout-3.4.2.js'), 
      moment: path.resolve(__dirname,'js/moment.js') 
     } 
    }, 
    module: 
    { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: 'babel-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.LoaderOptionsPlugin({ 
      minimize: true 
     }), 
     new UglifyJSPlugin({ 
      comments: false, 
      sourceMap: false, 
      compress: { 
       unused: true, 
       dead_code: true, 
       warnings: false, 
       drop_debugger: true, 
       conditionals: true, 
       evaluate: true, 
       drop_console: true, 
       sequences: true, 
       booleans: true 
      }, 
      mangle: true 
     }), 
     new webpack.optimize.AggressiveMergingPlugin(), 
     new webpack.optimize.OccurrenceOrderPlugin() 
    ] 
}; 

module.exports = config; 

Answer 1

これを行うための最善の方法を選択あなたはES6 importsyntaxで必要とメンバー（機能）をインポートすることです。ここに私のWebPACKの設定ファイルです。 Webpack's documentationには、方法が記述されています。あなたがそうするなら、WebpackはTree Shakingを自動的に行うべきです。