Question

我在尝试运行webpack进行生产时遇到错误。

ERROR in js/main.21dbce548a76ffc14cfb.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/tmi.js/lib/utils.js:3,0][js/main.21dbce548a76ffc14cfb.js:3529,20]

utils.js：3,0（与我的缩小的js中的相同）是：

// Return the second value if the first value is undefined..
    get: (obj1, obj2) => { return typeof obj1 === "undefined" ? obj2 : obj1; },

所以我假设错误被抛出，因为它正在阅读ES6，但它并不了解ES6？（箭头功能）

我不知道这里出了什么问题，这是我的webpack.config.js

// changed some loader syntax after reading
// https://webpack.js.org/how-to/upgrade-from-webpack-1/

const path = require(`path`);

const webpack = require(`webpack`);
const {UglifyJsPlugin} = webpack.optimize;

const CopyWebpackPlugin = require(`copy-webpack-plugin`);
const ExtractTextWebpackPlugin = require(`extract-text-webpack-plugin`);
const configHtmls = require(`webpack-config-htmls`)();

const extractCSS = new ExtractTextWebpackPlugin(`css/style.css`);

// change for production build on different server path
const publicPath = `/`;

// hard copy assets folder for:
// - srcset images (not loaded through html-loader )
// - json files (through fetch)
// - fonts via WebFontLoader

const copy = new CopyWebpackPlugin([{
  from: `./src/assets`,
  to: `assets`
}], {
  ignore: [ `.DS_Store` ]
});

const config = {

  entry: [
    `./src/css/style.css`,
    `./src/js/script.js`
  ],

  resolve: {
    // import files without extension import ... from './Test'
    extensions: [`.js`, `.jsx`, `.css`]
  },

  output: {
    path: path.join(__dirname, `server`, `public`),
    filename: `js/[name].[hash].js`,
    publicPath
  },

  devtool: `sourcemap`,

  module: {

    rules: [
      {
        test: /\.css$/,
        loader: extractCSS.extract([
          {
            loader: `css`,
            options: {
              importLoaders: 1
            }
          },
          {
            loader: `postcss`
          }
        ])
      },
      {
        test: /\.html$/,
        loader: `html`,
        options: {
          attrs: [
            `audio:src`,
            `img:src`,
            `video:src`,
            `source:srcset`
          ] // read src from video, img & audio tag
        }
      },
      {
        test: /\.(jsx?)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: `babel`
          },
          {
            loader: `eslint`,
            options: {
              fix: true
            }
          }
        ]
      },
      {
        test: /\.(svg|png|jpe?g|gif|webp)$/,
        loader: `url`,
        options: {
          limit: 1000, // inline if < 1 kb
          context: `./src`,
          name: `[path][name].[ext]`
        }
      },
      {
        test: /\.(mp3|mp4)$/,
        loader: `file`,
        options: {
          context: `./src`,
          name: `[path][name].[ext]`
        }
      }
    ]

  },

  plugins: [
    extractCSS,
    copy
  ]

};

if(process.env.NODE_ENV === `production`){

  //image optimizing
  config.module.rules.push({
    test: /\.(svg|png|jpe?g|gif)$/,
    loader: `image-webpack`,
    enforce: `pre`
  });

  config.plugins = [
    ...config.plugins,
    new UglifyJsPlugin({
      sourceMap: true, // false returns errors.. -p + plugin conflict
      comments: false
    })
  ];

}

config.plugins = [...config.plugins, ...configHtmls.plugins];

module.exports = config;

Answer 1

UglifyJs2有一个Harmony分支，它接受缩小的ES6语法。此时，您需要创建一个webpack分支并将webpack指向该分支。

我最近回答了几个类似的问题。有关详细说明，请查看#38387544或#39064441。

Answer 2

OP的错误来自UglifyJs，正如在接受的答案中解决的那样，此页面的某些人可能会收到来自babel的错误，在这种情况下，修复它：将<?php if(isset($_POST) && !empty($_FILES['image']['name'])){ $name = $_FILES['image']['name']; list($txt, $ext) = explode(".", $name); $row = 1; $row++; $image_name = $row . "." . $ext; //here i want increment in $row $tmp = $_FILES['image']['tmp_name']; if(move_uploaded_file($tmp, 'upload/'.$image_name)){ echo "<img width='200px' src='upload/".$image_name."' class='preview'>"; }else{ echo "image uploading failed"; } } ?>添加到"presets": ["es2015"] babel-loader的部分，或options.presets。

Answer 3

就我而言，我使用的是Webpack版本1.14 我从git ref

获得了帮助

步骤：

安装yarn add uglifyes-webpack-plugin（并删除了yarn remove uglifyjs-webpack-plugin）
然后安装yarn add uglify-js-es6
在webpack.config.js文件中，将new webpack.optimize.UglifyJsPlugin更改为 new UglifyJsPlugin

那我就能建造了。谢谢

来自UglifyJs的错误：SyntaxError：意外的令牌：运算符（＆gt;）

3 个答案: