首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >UglifyJs意想不到的标记:关键词const Webpack 4

UglifyJs意想不到的标记:关键词const Webpack 4
EN

Stack Overflow用户
提问于 2019-08-23 07:19:52
回答 3查看 4.8K关注 0票数 2

我正在开发ReactJs应用程序,并在webpack中使用UglifyJsPlugin来缩小我试图构建的js.but wen,提示出现以下错误。

ERROR in bundle.js from UglifyJs Unexpected token: keyword «const»

Webpack :4巴贝尔:7

代码语言:javascript
运行
复制
"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

代码语言:javascript
运行
复制
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(),

  ]
}
EN

回答 3

Stack Overflow用户

发布于 2019-08-23 07:40:52

如果没有任何帮助,您可以尝试使用https://github.com/webpack-contrib/terser-webpack-plugin

票数 2
EN

Stack Overflow用户

发布于 2019-08-23 08:09:21

你应该解析一些你的node_modules

问题是,您的一些node_modulesconst,它们也应该通过babel-loader进行解析。

有几种方法你可以做到这一点。你可以读那根线,试试什么对你更好。

我更喜欢这样的:

代码语言:javascript
运行
复制
test: /\.(js|jsx|es6)$/,
exclude: /node_modules\/(?!(MY-MODULE|ANOTHER-ONE)\/).*/,

这将忽略除MY-MODULEANOTHER-ONE模块之外的所有ANOTHER-ONE模块。作为结果,最后两个将被解析。

票数 2
EN

Stack Overflow用户

发布于 2020-04-12 08:57:58

尝试在下面添加依赖项

代码语言:javascript
运行
复制
$ npm install terser-webpack-plugin --save-dev

webpack.config.js

代码语言:javascript
运行
复制
 const TerserPlugin = require('terser-webpack-plugin');
 module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

(快乐的codding :)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57621523

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档