Плагин сжатия не создает файл gz в рабочем режиме - PullRequest
0 голосов
/ 08 октября 2018

Я очень новичок в конфигурации веб-пакетов.Мы использовали плагин Compression для генерации файлов .gz (main-client.js.gz, vendor.js.gz, polyfills.js.gz), но, к сожалению, код не генерирует файл gz.Мой webpack.config.js выглядит следующим образом

webpack.config.js

  var IsDevBuild = (process.argv.indexOf("--env.prod") < 0 && process.env.NODE_ENV !== "production");

var path = require("path");
var webpack = require("webpack");
var merge = require("webpack-merge");
var CompressionPlugin = require('compression-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

var Config = {
    resolve: { extensions: [".js", ".ts"] },
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "./wwwroot/dist") ,
        publicPath: "/dist/" // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        rules: [            
            { test: /\.ts$/, include: /ClientApp/, loader: "ts-loader", query: { silent: true } },
            { test: /\.html$/, loader: "raw-loader" },
            { test: /\.css$/, loader: "to-string-loader!css-loader" },
            {
                test: /\.scss$/,
                use: [{
                    loader: "to-string-loader"
                }, {
                    loader: "css-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }]
            },
            { test: /\.(svg)$/, use: { loader: "url-loader", options: { limit: 1000 } } },
            { test: /\.(png|jpg|jpeg|gif)$/, loader: "url-loader", query: { limit: 100 } },
        ].concat(IsDevBuild ? [        
            {
                test: /\.js$/, enforce: 'pre', use: 'source-map-loader',
                exclude: [
                    path.resolve(__dirname, 'node_modules/angular2-color-picker')
                ]

            }
        ] : [])
    },
    entry: { 'main-client': "./ClientApp/boot-client.ts" },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./wwwroot/dist/vendor-manifest.json")
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            Tether: "tether",
            clipboard: "clipboard-js"
        }),
        new CopyWebpackPlugin([
            {
                from: 'node_modules/ngx-monaco-editor/assets/monaco',
                to: '../assets/monaco',
            }
        ]),
    ].concat(IsDevBuild ? [        
        new webpack.SourceMapDevToolPlugin()
    ] : [])
}

if (!IsDevBuild) {
    Config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: true,
            "mangle.props": true,
            compress: {
                warnings: false,
                screw_ie8: true,
                conditionals: true,
                unused: true,
                comparisons: true,
                sequences: true,
                dead_code: true,
                evaluate: true,
                if_return: true,
                join_vars: true
            },
            comments: false,
            sourceMap: false
        }));

    Config.plugins.push(new CompressionPlugin({
        test: /\.(js|css)$/,
      asset: '[path].gz[query]',
      algorithm: 'gzip',
        deleteOriginalAssets: true,
    minRatio:4}));
}

module.exports = Config;

webpack.config.vendor.js

var IsDevBuild = process.argv.indexOf("--env.prod") < 0;
var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CompressionPlugin = require('compression-webpack-plugin');

var vendor = {
    resolve: {
        extensions: [".js"]
    },
    module: {
        rules: [
            { test: /\.(woff|woff2|eot|ttf)(\?|$)/, loader: "url-loader?limit=10000" },
            { test: /\.(svg)$/, use: { loader: "url-loader", options: { limit: 1000 } } },
            { test: /\.(png)(\?|$)/, loader: "url-loader?limit=100" },
            {
                test: /\.css(\?|$)/,
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader"
                })
            }
        ]
    },
    entry: {
        vendor: [
            "@angular/platform-browser",
            "@angular/platform-browser-dynamic",
            "@angular/core",
            "@angular/common",
            "@angular/http",
            "@angular/router",
            "clipboard-js",
            "file-saver",
            "tether",
            "bootstrap/dist/js/bootstrap.min.js",
            "bootstrap/dist/css/bootstrap.min.css",
            "chart.js",
            "jquery",
            "./ClientApp/app/css/app.css",
            "moment",
            "ng2-charts",
            "ng2-datetime-picker",
            "ng2-file-upload",
            "font-awesome/css/font-awesome.min.css",
            "rxjs"
        ]
    },
    output: {
        path: path.join(__dirname, "wwwroot", "dist"),
        filename: "[name].js",
        library: "[name]_[hash]"
    },
    plugins: [
        new ExtractTextPlugin("vendor.css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.$": "jquery",
            Tether: "tether",
            "window.Tether": "tether",
            "Chart": "chart.js",
            "moment": "moment",
            clipboard: "clipboard-js"
        }),
        new webpack.DllPlugin({
            path: path.join(__dirname, "wwwroot", "dist", "[name]-manifest.json"),
            name: "[name]_[hash]"
        })
    ]
};

if (!IsDevBuild) {
    vendor.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: true,
            "mangle.props": true,
            compress: {
                warnings: false,
                screw_ie8: true,
                conditionals: true,
                unused: true,
                comparisons: true,
                sequences: true,
                dead_code: true,
                evaluate: true,
                if_return: true,
                join_vars: true
            },
            comments: false,
            sourceMap: false
        }));

    vendor.plugins.push(new CompressionPlugin());
}

var polyfill = {
    resolve: {
        extensions: [".ts", ".js"]
    },
    entry: {
        polyfill: [
            "core-js/es6",
            "core-js/es7/reflect",
            "zone.js",
            "web-animations-js/web-animations.min.js"
        ]
    },
    output: {
        path: path.join(__dirname, "wwwroot", "dist"),
        filename: "[name].js"
    }
};

if (!IsDevBuild) {
    polyfill.plugins = polyfill.plugins || [];

    polyfill.plugins.push(new webpack.optimize.UglifyJsPlugin({
        beautify: false,
        mangle: true,
        "mangle.props": true,
        compress: {
            warnings: false,
            screw_ie8: true,
            conditionals: true,
            unused: true,
            comparisons: true,
            sequences: true,
            dead_code: true,
            evaluate: true,
            if_return: true,
            join_vars: true
        },
        comments: false,
        sourceMap: false
    }));

    polyfill.plugins.push(new CompressionPlugin({
        test: /\.(js|css)$/,
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        deleteOriginalAssets: true, minRatio:4
    }));
}

module.exports = [vendor, polyfill];

мы использовали плагин сжатия для генерации файла .gz, но я думаю, что мы использовали что-то очень грязное.Не могли бы вы помочь мне с этим.

...