webpack 2:来自UglifyJs的./public/bundle.js中的错误意外字符'''

时间:2016-08-21 12:58:10

标签: javascript webpack

我有两个相关问题:

首先:当我运行npm run build时,bundle.js文件没有缩小,但我收到bundle.js.map个文件。

第二:当我运行webpack -d时,我只获得一个缩小的bundle.js文件(并且没有错误)但是当我运行webpack -p时,我得到一个bundle.js < strong>不缩小,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 -pwebpack -d的行为 相反?
  2. 当我运行bundle.js时,为什么npm run build不会缩小?
  3. 当我在模块中使用模板字符串时,为什么会出现Unexpected character错误?
  4. 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文档......)都进行过搜索,但我找不到对我有用的东西。谢谢!

1 个答案:

答案 0 :(得分:5)

UglifyJS2尚未在其版本中提供ES6 / Harmony支持。但是,Harmony分支允许您使用ES6语法缩小/ uglify文件。

我可以为您推荐一种替代解决方案,它可以帮助您减少构建时间,将所有ES6转换为ES5。

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