我正在开发ReactJs应用程序,并在webpack中使用UglifyJsPlugin
来缩小我试图构建的js.but wen,提示出现以下错误。
ERROR in bundle.js from UglifyJs Unexpected token: keyword «const»
Webpack :4巴贝尔:7
"dependencies": {
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
}
webpac.config.js
const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
optimization: {
minimizer: [
new UglifyJsPlugin(),
],
},
module: {
rules: [
{
test: /\.(js|jsx|es6)$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["@babel/preset-env"]
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader'],
})
},
{
test: /\.(gif|png|jpe?g|svg||woff|woff2|eot|ttf)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
disable: true,
}
}
]
},
]
},
node: {
fs: 'empty',
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
filename: "./index.html"
}),
new Dotenv({
safe: true,
systemvars: true,
silent: true,
defaults: false
}),
new ExtractTextPlugin('style.css',{allChunks: false}),
new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
]
}
发布于 2019-08-23 07:40:52
如果没有任何帮助,您可以尝试使用https://github.com/webpack-contrib/terser-webpack-plugin。
发布于 2019-08-23 08:09:21
你应该解析一些你的node_modules
问题是,您的一些node_modules
有const
,它们也应该通过babel-loader
进行解析。
有几种方法你可以做到这一点。你可以读那根线,试试什么对你更好。
我更喜欢这样的:
test: /\.(js|jsx|es6)$/,
exclude: /node_modules\/(?!(MY-MODULE|ANOTHER-ONE)\/).*/,
这将忽略除MY-MODULE
和ANOTHER-ONE
模块之外的所有ANOTHER-ONE
模块。作为结果,最后两个将被解析。
发布于 2020-04-12 08:57:58
尝试在下面添加依赖项
$ npm install terser-webpack-plugin --save-dev
webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
(快乐的codding :)
https://stackoverflow.com/questions/57621523
复制相似问题