我不能在 webpack 配置文件中使用 ES6答案

【问题标题】：I can't use ES6 in webpack config file我不能在 webpack 配置文件中使用 ES6
【发布时间】：2016-02-06 14:27:52
【问题描述】：

是否可以在 webpack 配置文件中使用 ES6（尤其是 import - 而不是 require）？

我有例如

import webpack from 'webpack';

但我收到以下错误

(function (exports, require, module, __filename, __dirname) 
{ import webpack from'webpack';

SyntaxError: Unexpected reserved word import

在this thread 之后，我将配置命名为“webpack.config.babel.js”，我将 babel(6.0.15)、babel-core(6.1.2) 安装为开发部门，但没有任何效果。在 WinXP 上试用。

感谢您的帮助。

【问题讨论】：

如果你通过 babel 编译器将它运行到 node.js 中，它可能会起作用。即babel webpack.config.es6 | node，但这并没有将其放入 webpack。

标签： ecmascript-6 webpack

【解决方案1】：

你可以像这样使用 gulp 和 babel/register：

var gulp = require('gulp');
var webpack = require('webpack');
var gutil = require('gutil');
var babel = require('babel/register');
var config = require(path.join('../..', 'webpack.config.es6.js'));

gulp.task('webpack-es6-test', function(done){
   webpack(config).run(onBuild(done));
});

function onBuild(done) {
    return function(err, stats) {
        if (err) {
            gutil.log('Error', err);
            if (done) {
                done();
            }
        } else {
            Object.keys(stats.compilation.assets).forEach(function(key) {
                gutil.log('Webpack: output ', gutil.colors.green(key));
            });
            gutil.log('Webpack: ', gutil.colors.blue('finished ', stats.compilation.name));
            if (done) {
                done();
            }
        }
    }
}

...而且你的 webpack 配置可以有任何 es6。经过测试并为我工作。

【讨论】：

【解决方案2】：

拉贝特，

您有代码仓库的链接吗？如果您可以链接我们，可能对调试非常有帮助。听起来您可能缺少 babel-loader 包。

我写了一篇关于在 ES6 中配置 webpack（用于反应）的教程。

以下是一些可能与您相关的 sn-ps。

import path from 'path'
export default {
  entry:['./js/app.js',
  ],

  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'build'),
    publicPath: 'http://localhost:8080/',
  },

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['react-hot', 'babel'],
    }],
  },

}

还有我的 package.json 文件

{
 “name”: “Todo_tutorial”,
 “version”: “1.0.0”,
 “description”: “”,
 “main”: “index.js”,
 “scripts”: {
 “test”: “echo \”Error: no test specified\” && exit 1",
 “build”: “webpack --colors --progress”,
 “start”: “webpack-dev-server --hot --inline --color --progress ”
 },
 “author”: “”,
 “license”: “ISC”,
 “dependencies”: {
 “react”: “^0.14.0”
 },
 “devDependencies”: {
 “babel-core”: “^5.8.25”,
 “babel-loader”: “^5.3.2”,
 “flux”: “^2.1.1”,
 “webpack”: “^1.12.2”,
 “webpack-dev-server”: “^1.12.0”
 }
}

来源：https://medium.com/@ColeMurray/react-flux-in-es6-pt-1-2-e2a7b4aa074e

【讨论】：