![](/img/trans.png)
[英]What is the correct way to setup webpack.config.js to run the firebase admin sdk
[英]Correct way to use minimize javascript in webpack.config.js
我正在关注有关webpack
的教程,但该教程似乎正在使用旧版本的webpack
。 我试图最小化.js
文件,但是每次我运行npm run webpack
,都会在控制台中收到以下错误消息:
webpack.optimize.UglifyJsPlugin已被删除,请改用config.optimization.minimize。
如何使用config.optimization.minimize
? 我已经搜寻了一段时间,但没有成功...我需要在webpack.config.js
哪些更改?
这是我的webpack.config.js
:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('allstyles.css');
module.exports = {
entry: './wwwroot/source/app.js',
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js'
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new webpack.optimize.UglifyJsPlugin()
],
module: {
rules: [
{test: /\.css$/, use: extractCSS.extract(['css-loader?minimize'])},
{test: /\.js$/,//
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
};
package.json
:
{
"name": "WebpackBlogExample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-env": "^1.6.1",
"bootstrap": "^4.0.0-beta.2",
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^3.0.2",
"jquery": "^3.3.1",
"popper.js": "^1.12.9",
"style-loader": "^0.20.2",
"uglifyjs-webpack-plugin": "^1.2.2",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
如果您查看网址,它将说明所有优化选项。
在开发人员模式下,默认情况下,webpack 4不会最小化js,这是为了加快开发速度。 一旦将模式切换为生产或在运行webpack时使用-p,它将自动最小化JS,因此webpack 4中不再需要uglifyjs设置。
UglifyJSPlugin:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: { ... }
})
]
}
其他选项:
请注意,虽然UglifyJSPlugin是开始进行缩小的好地方,但还有其他选择。 这是一些更受欢迎的:
[BabelMinifyWebpackPlugin][1]
[ClosureCompilerPlugin][1]
如果您决定尝试其他方法,只需确保您的新选择也按照树状摇动指南中所述丢弃无效代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.