webpack 2：來自UglifyJs的./public/bundle.js中出現錯誤意外字符'`'

Question

我有2個相關問題：

首先：當我運行npm run build ， bundle.js文件沒有縮小，但是我確實得到了bundle.js.map文件。

第二：當我運行webpack -d我只能得到一個精縮bundle.js文件（沒有錯誤），但是當我運行webpack -p然后我得到一個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]

我的問題：

1. webpack -p和webpack -d的行為不應該相反嗎？
2. 為什么在我運行npm run build時沒有縮小bundle.js ？
3. 在模塊中使用模板字符串時，為什么會出現那些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) }
    })
  ]
};

我確實在這里和Google（以及webpack文檔…）中都進行了搜索，但是找不到對我有用的東西。 謝謝！！

Answer 1

UglifyJS2的發行版中尚不支持ES6 / Harmony。 但是，有一個Harmony分支，它允許您使用ES6語法最小化/丑化文件。

我可以建議您使用另一種解決方案，該解決方案可以幫助您花費更少的構建時間將所有ES6移植到ES5。

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