webpack会使项目更大吗？ [英] Does webpack make projects bigger?

问题描述

我开始在我现有的项目中使用webpack，它生成的包的大小比webpack之前大得多。
我正在使用我能想到的所有优化，但仍然比以前大60％左右。
我不知道我做错了什么。

I started using webpack with my existing project and the bundle it generates is much bigger in size than before webpack. I am using all the optimisations I can think of and still it's around 60% bigger than before. I don't know what I am doing wrong.

我的配置：

'use strict';

// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var jQueryPlugin = require('jquery');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//var Promise = require('es6-promise-polyfill').Promise;

module.exports = function makeWebpackConfig (options) {
    /**
     * BUILD is for generating minified builds
     */
    var BUILD = !!options.BUILD;

    var config = {};

    config.entry = {
        app: './app.js',
        iosCordova: ['./static/wrapper-resources/js/ios/cordova_all.js'],
        androidCordova: ['./static/wrapper-resources/js/android/cordova_all.js']
    };

    /**
     * Output
     */
    config.output = {
        // Absolute output directory
        path: __dirname + '/public',

        // Output path from the view of the page
        // Uses webpack-dev-server in development
        publicPath: 'http://localhost:8080/',

        filename: '[name].bundle.js',

        // non-entry

        chunkFilename: '[name].bundle.js'
    };
    if (BUILD) {
        config.devtool = 'source-map';
    } else {
        config.devtool = 'eval';
    }

    /**
     * Loaders
     */
    config.module = {
        noParse: /node_modules\/html2canvas/,
        preLoaders: [],
        loaders: [
            {
                // JS LOADER
                test: /\.js$/,              
                loader: 'babel?optional[]=runtime,cacheDirectory',
                presets: ['es2015'],
                plugins: ['transform-runtime'],
                exclude: [/node_modules/,
                    /cordova_all/
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file?name=[name].[ext]'
                //loader: 'url-loader'
            }, {
                test: /\.html$/,
                loader: 'raw'
            }]
    };

    var cssLoader = {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss', 'scss', 'sass')
    };
    config.module.loaders.push(cssLoader);

    config.postcss = [
        autoprefixer({
            browsers: ['last 2 version']
        })
    ];

    /**
     * Plugins
     */
    config.plugins = [

        // Extract css files
        new ExtractTextPlugin('[name].css')
        ,
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ];

    // build specific plugins
    if (BUILD) {
        config.plugins.push(
            new webpack.NoErrorsPlugin(),

            new webpack.optimize.DedupePlugin(),
            // Minify all javascript, switch loaders to minimizing mode
            new webpack.optimize.UglifyJsPlugin()
        )
    }

    /**
     * Dev server configuration
     */
    config.devServer = {
        contentBase: './public',
        stats: {
            modules: false,
            cached: false,
            colors: true,
            chunk: false
        }
    };  

    return config;
};

推荐答案

我弄清楚了。导入时我没有导入节点模块的缩小版本。我猜webpack的缩小和丑化并没有削减它。
感谢帮助者。

I figured it out. When importing I didn't import the minified version of node modules. I guess webpack's minification and uglification just doesn't cut it. Thanks for the helpers.

这篇关于webpack会使项目更大吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！