遇到问题
webpack打包时使用UglifyJs
(github地址)来压缩美化JS代码,在npm run build
时报错了:
// webpack.prod.js 内容
const merge = require('webpack-merge')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const common = require('./webpack.common.js')
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin()
]
})
报错截图:
解决方法
需要安装babel-preset-es2015
,若babel-core
、babel-loader
没有安装的话也要安装上:
npm install --save-dev babel-loader babel-core babel-preset-es2015
安装完以后,再修改webpack.prod.js
中添加rules规则:
const merge = require('webpack-merge')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const common = require('./webpack.common.js')
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin()
],
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}],
exclude: /node_modules/
}
]
}
})
再执行npm run build
,如果出现了以下错误(babel相关的错误):
这个错误日志指出了原因:找不到'@babel/core'
,再按照错误提示的操作说明可以知道:babel-loader@8 需要 Babel 7(里面的包'@babel/core'
),如果你想要使用 Babel 6.x版本,你应该安装'babel-loader@7'
。在package.json
文件中可以看到我们安装的版本:
那我们就按照提示进一步处理:
npm install --save-dev babel-loader@7
此时package.json
文件中安装的版本:
此时再执行npm run build
即可成功构建了。