webpack 2：来自UglifyJs的./public/bundle.js中的错误意外字符'`'答案

【问题标题】：webpack 2: ERROR in ./public/bundle.js from UglifyJs Unexpected character '`'webpack 2：来自UglifyJs的./public/bundle.js中的错误意外字符'`'
【发布时间】：2016-08-21 12:58:10
【问题描述】：

我遇到了 2 个相关问题：

首先：当我运行 npm run build 时，bundle.js 文件没有被缩小，但我确实得到了一个 bundle.js.map 文件。

第二：当我运行 webpack -d 时，我只得到一个缩小的 bundle.js 文件（并且没有错误），但是当我运行 webpack -p 时，我得到一个 not 缩小的 bundle.js ，bundle.js.map，以及那些错误：

ERROR in ./public/bundle.js from UglifyJs
Unexpected character '`' [./app/config.js:5,0][./public/bundle.js:76,14]

ERROR in ./public/bundle.js from UglifyJs
Unexpected character '`' [./app/config.js:5,0][./public/bundle.js:76,14]

我的问题：

webpack -p和webpack -d的行为不应该是对面？
为什么当我运行npm run build 时bundle.js 没有被缩小？
为什么在我的模块中使用模板字符串时会出现Unexpected character 错误？

package.json 看起来像这样：

{
  ...,
  "scripts": {
    "build": "webpack --progress --watch"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015-native-modules": "^6.9.4",
    "eslint": "^3.3.1",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-html": "^1.5.2",
    "eslint-plugin-import": "^1.13.0",
    "eslint-plugin-jsx-a11y": "^2.1.0",
    "eslint-plugin-react": "^6.1.2",
    "webpack": "^2.1.0-beta.21"
  }
}

而webpack.config.js 是这样的：

const webpack = require('webpack'); // eslint-disable-line import/no-extraneous-dependencies

const nodeEnv = process.env.NODE_ENV || 'production';

module.exports = {
  entry: {
    filename: './app/app.js'
  },
  output: {
    filename: './public/bundle.js'
  },
  modules: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015-native-modules']
        }
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    // uglify
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      output: { comments: false },
      sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
    })
  ]
};

我确实搜索过这里和谷歌（和 webpack 文档......），但我找不到任何对我有用的东西。谢谢！！

【问题讨论】：

标签： javascript webpack

【解决方案1】：

UglifyJS2 在其发行版中还没有 ES6/Harmony 支持。但是，Harmony 分支允许您使用 ES6 语法缩小/丑化文件。

我可以向您推荐一个替代解决方案，它可以帮助您花费更少的构建时间将所有 ES6 转换为 ES5。

只需在 package.json 中指定 UglifyJs，然后让 npm 处理依赖项。 "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",

【讨论】：

请注意：使用节点的模块解析算法，您实际上可以将 uglifyharmony 分支的开发部门添加到您的开发部门。如果您真的担心重叠，您也可以使用 find node_modules/webpack -name "uglify*" | xargs rm -Rf 之类的脚本删除辅助节点 - 只需管理更少的分叉；)
我同意，分叉整个 webpack 并不是一个可靠的解决方案。但是，根据 npm 版本，npm 解析算法可能具有不同的行为。另一方面，bebraw 刚刚发布了uglifyjs-webpack-plugin 插件，以便您可以使用/配置与 webpack 解耦的 UglifyJs。