javascript - Webpack 输出包大于预期

Question

我的入口 JS 文件中唯一的内容是:

import $ from 'jquery';

jQuery JS 文件大小为 29.5kb，来自 jsdelivr 。 我的条目仅包含 jQuery，没有其他内容，大小为 86kb。

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry: './src/js/scripts.js',
    output: {
        publicPath: "./dist/",
        path: path.join(__dirname, "dist/js/"),
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: [
                        ['env', { loose:true, modules:false }],
                        'stage-2'
                    ],
                    plugins: [
                        ['transform-react-jsx', { pragma:'h' }]
                    ]
                }
            },
            {
                test: /\.pug$/,
                use: [
                    "file-loader?name=[name].html&outputPath=../dist",
                    "extract-loader",
                    "html-loader",
                    "pug-html-loader"
                ]
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader?url=false', 'sass-loader']
                })
            },
        ]
    },
    resolve: {
        alias: {
            "TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
            "TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
            "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
        }
    },
    plugins: [
        new ExtractTextPlugin('../css/main.css'),
        new UglifyJsPlugin({
            test: /\.js($|\?)/i
        })
    ],
    stats: {
        warnings: false
    }
};

我还应该提到，进入输出 bundle.js 它仍然有 jQuery 注释。

jQuery JavaScript Library v3.3.1 https://jquery.com/ ...

尽管我使用 -p 参数调用 webpack 并拥有 UglifyJS 插件，但文件的其余部分已被缩小和损坏。有什么想法吗？

谢谢!

Answer 1

尝试从您的链接复制并粘贴缩小的 jquery。它的大小为86.9 kb。 This link还显示 jquery v3 缩小后的文件大小也在 80kb 左右。

所以您已经有了正确的设置。也许您的29.5kb文件大小是缩小+gzipped文件。