我正在尝试使用uglifyjs-webpack-plugin
来构建带有最小化的react应用,但是由于UglifyJS,它在生产模式下失败了。
我遇到以下错误。
来自UglifyJs的bundle.js中的ERROR 意外的令牌:关键字«const»[./src/utils/Constants.js:1,0][bundle.js:228154,0]
以下是我的webpack配置,可能是我缺少一些babel插件。任何帮助,将不胜感激。
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const bourbon = require('node-bourbon').includePaths;
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 3000;
const PROXY = `http://${HOST}:${PORT}`;
const config = {
entry: ["core-js/stable", "regenerator-runtime/runtime", "./src/index.js"],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/'
},
module: {
rules: [{
test: /.(jsx|js)?$/,
exclude: [
path.resolve(__dirname, 'node_modules'),
],
loader: 'babel-loader',
options: {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
"@babel/plugin-proposal-optional-chaining",
]
}
},
{
test: /.(css|scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer(),
]
}
}, 'sass-loader?includePaths[]=' + bourbon,
]
},
{
test: /\.(png|jpg|jpeg|gif|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000&name=img/[hash].[ext]'
},
{
test: /\.(ttf|ttc|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000&name=fonts/[hash].[ext]'
}
]
},
resolve: {
extensions: ['.json', '.js', '.jsx', '.css'],
},
devtool: 'source-map',
devServer: {
historyApiFallback: true,
host: HOST,
port: PORT,
},
plugins: [
new MiniCssExtractPlugin({
filename: './css/style.css',
chunkFilename: "[id].css"
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer(),
]
}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: HOST,
port: PORT,
proxy: PROXY
}),
new CopyWebpackPlugin([{
from: './*.html',
to: './',
context: 'public/'
},
{
from: './*.ico',
to: './',
context: 'public/'
},
{
from: './img/**/*',
to: './',
context: 'public/'
},
{
from: './fonts/**/*',
to: './',
context: 'public/'
},
{
from: './js/**/*',
to: './',
context: 'public/'
}
], {
copyUnmodified: true
}),
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
performance: {
hints: false
} // Bundle warnings
};
module.exports = config;