在webpack.config.js中使用最小化javascript的正确方法
我正在关注一个关于在webpack.config.js中使用最小化javascript的正确方法,javascript,npm,webpack,Javascript,Npm,Webpack,我正在关注一个关于webpack的教程,但该教程似乎使用了webpack的旧版本。我正在尝试最小化.js文件,但每次运行npm run webpack时,控制台都会显示以下错误消息: webpack.optimize.UglifyJsPlugin已被删除,请使用 改为config.optimization.minimize 如何使用该配置优化.minimize?我已经在谷歌上搜索了一段时间,但没有成功。。。我需要在我的webpack.config.js中更改什么 这是我的webpack.conf
webpack
的教程,但该教程似乎使用了webpack
的旧版本。我正在尝试最小化.js
文件,但每次运行npm run webpack
时,控制台都会显示以下错误消息:
webpack.optimize.UglifyJsPlugin已被删除,请使用
改为config.optimization.minimize
如何使用该配置优化.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": {}
}
如果您查看url,它将解释所有优化选项
默认情况下,在开发模式下,Webpack4不会最小化js,这是为了加快开发。一旦您在运行webpack时切换到生产模式或使用-p,它将自动最小化您的JS,不再需要在webpack 4中设置uglifyjs。webpack 4.X和缩小JS
UglifyJSPlugin:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: { ... }
})
]
}
其他选择:
请注意,虽然UglifyJSPlugin是小型化的绝佳起点,但还有其他选择。以下是一些更受欢迎的:
[BabelMinifyWebpackPlugin][1]
[ClosureCompilerPlugin][1]
如果您决定尝试另一个,只需确保您的新选择也会删除死代码,如《摇树指南》中所述
资料来源:
看看:
我刚刚读到提取文本网页包插件
与网页包4
不兼容,因此我现在将迁移到网页包3
,谢谢您的纠正。如果你升级到alpha版本的extract text webpack插件,它就可以工作了。他们正在开发这个插件来升级它。如果我是你,你正在开始一个项目,我不会降级到3,而是让它与阿尔法版本的工作。如果你有机会从头开始,以后升级会更加困难。我现在有一个很大的网页设置,要迁移到新版本并不容易。正在等待一些插件来支持Webpack4。祝你好运