[英]Correct way to use minimize javascript in webpack.config.js
I'm following a tutorial about webpack
, but it seems that the tutorial is making use of an older version of webpack
. 我正在关注有关
webpack
的教程,但该教程似乎正在使用旧版本的webpack
。 I'm trying to minimize the .js
files but every time I run npm run webpack
I get this error message in the console: 我试图最小化
.js
文件,但是每次我运行npm run webpack
,都会在控制台中收到以下错误消息:
webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
webpack.optimize.UglifyJsPlugin已被删除,请改用config.optimization.minimize。
How do I use that config.optimization.minimize
? 如何使用
config.optimization.minimize
? I've been googling for some time but with no success... What do I need to change in my webpack.config.js
? 我已经搜寻了一段时间,但没有成功...我需要在
webpack.config.js
哪些更改?
This is my 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
: 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 https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
If you look at the url it will explain all optimization options. 如果您查看网址,它将说明所有优化选项。
By default in dev mode webpack 4 won't minimize js, this is to speed up development. 在开发人员模式下,默认情况下,webpack 4不会最小化js,这是为了加快开发速度。 As soon as you switch mode to production or use the -p while running webpack it will automatically minimize your JS there is no need for uglifyjs setup anymore in webpack 4.
一旦将模式切换为生产或在运行webpack时使用-p,它将自动最小化JS,因此webpack 4中不再需要uglifyjs设置。
UglifyJSPlugin: UglifyJSPlugin:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: { ... }
})
]
}
Other options: 其他选项:
Note that while the UglifyJSPlugin is a great place to start for minification, there are other options out there. 请注意,虽然UglifyJSPlugin是开始进行缩小的好地方,但还有其他选择。 Here are a few more popular ones:
这是一些更受欢迎的:
[BabelMinifyWebpackPlugin][1]
[ClosureCompilerPlugin][1]
If you decide to try another, just make sure your new choice also drops dead code as described in the tree shaking guide. 如果您决定尝试其他方法,只需确保您的新选择也按照树状摇动指南中所述丢弃无效代码。
source: https://webpack.js.org/guides/production/ 来源: https : //webpack.js.org/guides/production/
Look at: https://stackoverflow.com/a/49767690/6200607 查看: https : //stackoverflow.com/a/49767690/6200607
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.