Я очень новичок в конфигурации веб-пакетов.Мы использовали плагин 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, но я думаю, что мы использовали что-то очень грязное.Не могли бы вы помочь мне с этим.