私は私の反応アプリをgzipに圧縮したい、実際には2.2 mbなので、私はcompression-webpack-pluginを使用したが、圧縮できません
mywebpack.config.js
const webpack = require('webpack');
const path = require('path');
const fs = require("fs")
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin');
const VENDOR_LIBS =[
'antd','axios','moment','rc-time-picker','react',
'react-dom','react-ga','react-google-maps','react-loadable',
'react-redux','react-router','react-router-dom','recompose','redux','redux-thunk'
]
module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');
return {
node: {
fs: 'empty',
child_process: 'empty',
},
entry: {
bundle:'./src/app.js',
vendor:VENDOR_LIBS
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
},{
test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: "file-loader",
}],
},
plugins: [
CSSExtract,
new webpack.optimize.CommonsChunkPlugin({
name:'vendor'
}),
new HtmlWebpackPlugin({
template:'src/index.html'
}),
new CompressionPlugin(),
new BundleAnalyzerPlugin()
],
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
Host:'0.0.0.0',
disableHostCheck: true,
}
};
};
エラーが表示されます
TypeError:未定義のプロパティ「emit」を読み取ることができません
CompressionPlugin.apply(/ media/.........
追加オプションをCompressionPluginに追加すると
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
エラーが表示されます
新しいValidationError(ajv.errors、name)を投げます;
ValidationError:圧縮プラグインの無効なオプション
オプションには追加のプロパティを含めないでください
この問題を解決するにはどうすればよいですか、アプリをgzipする他の方法がありますか?.
「資産」を「ファイル名」に変更します。
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
compression-webpack-plugin@2. に重大な変更があります。
Webpack 4にアップグレードするか、compression-webpack-plugin @ 1.1.12を使用する必要があります。
また、assetオプションは非推奨です。代わりに filename を使用してください。
あなたの問題は、webpack 4で実行する必要があり、ドキュメントに記載されているようにノードが6.9.0以上でなければならないことです:
「このモジュールには、最小Node v6.9.0およびWebpack v4.0.0が必要です。 "
設定も間違っています:
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})