使用 webpack2 最小化包

Question

是否可以最小化我的捆绑文件和所有使用的模块。我在 javascript 中使用 import 但我希望 webpack 也最小化所有导入的 js 文件。这意味着从导入的外部库中删除所有未使用的代码。这可能吗。特别是 plotly 是一个非常大的图书馆，但我只使用饼图。我认为我的包不需要 plotly 中的所有代码。这是我的 webpack 配置文件：

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 所需的成员（函数）import syntax. Webpack's documentation 描述了如何操作。如果你这样做，Webpack 应该会自动进行 Tree Shaking。

使用 webpack2 最小化包

Minimize bundle with webpack2

javascript

npm

ecmascript-6

webpack-2