Question

这是我用于开发和生产模式的webpack配置;

let debug = process.env.NODE_ENV !== 'production';
import webpack from "webpack";
import LiveReloadPlugin from "webpack-livereload-plugin";
import WebpackNotifierPlugin from "webpack-notifier";
import validate from "webpack-validator";
import failPlugin from "webpack-fail-plugin";
import autoprefixer from "autoprefixer";

let loaders = [
    {test: /\.tsx?$/, loader: 'ts', exclude: /(node_modules)/},
    {
        test   : /\.js?$/,
        exclude: /(node_modules)/,
        loader : 'babel', // 'babel-loader' is also a legal name to reference
        query  : {
            presets       : ['es2015'],
            cacheDirectory: true
        }
    },
    {
        test  : /\.(eot|ttf|wav|mp3|png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader',
    },
    {
        test   : /\.scss$/,
        loaders: [
            "style-loader",
            "css-loader",
            "postcss-loader",
            "sass-loader?outputStyle=compressed"
        ]
    }
];

let globaljQuery = {
    $              : 'jquery',
    jQuery         : 'jquery',
    'window.jQuery': 'jquery'
};


let devPlugins = [
    new WebpackNotifierPlugin({excludeWarnings: true}),
    new webpack.ProvidePlugin(globaljQuery),
    new LiveReloadPlugin(),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    }),
    // new ExtractTextPlugin('css/app.css', {allChunks: true}),
    failPlugin,
];

let prodPlugins = [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
        compress : {warnings: false},
        output   : {comments: false},
        sourceMap: false
    }),
    new webpack.ProvidePlugin(globaljQuery)
];

module.exports = validate({
    context: __dirname,
    devtool: 'eval',
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
        alias     : {jquery: __dirname + '/resources/assets/js/libs/jquery-3.1.0.min.js'}
    },
    entry  : [
        // 'webpack/hot/dev-server',
        // 'webpack-dev-server/client?http://localhost:8081',
        __dirname + '/resources/assets/js/main.js'
    ],
    output : {
        path      : __dirname + '/public',
        publicPath: '/public/',
        filename  : 'js/app.js'
    },
    plugins: debug ? devPlugins : prodPlugins,
    module : {
        loaders: loaders,
    },
    postcss: () => {
        return [autoprefixer]
    }
});

但出于某种原因，如果我单独缩小模块，它会编译成一个较小的包，而不是在生产模式下将相同的任务委托给webpack。

例如，如果我使用未压缩的＆＃34; owl carousel＆＃34;插件和委托压缩任务到webpack捆绑是43 kb更大。

诸如photoswipe之类的插件使得捆绑大约82kb。

jQuery大约120kb ......

我错过了手动压缩单个插件的效率更高，因为从我的观点来看，webpack应该自动执行此任务并将文件压缩到与手动操作相同的水平......？

Webpack不会压缩文件

0 个答案: