节点Webpack不承认“导入”

Question

所以我是Node和Webpack的新手，我很难让我的项目正确编译。每次将其加载到浏览器中时，都会得到错误：Uncaught SyntaxError: Unexpected token import。下面是我的webpack.config.js文件的副本：

webpack.config.js：

var path = require('path');
var webpack = require('webpack');

var loaders = [
  {
    "test": /\.js?$/,
    "exclude": /node_modules/,
    "include": ["/js","/src", "/build"],
    "loader": "babel",
    "query": {
      "presets": [
        "es2015",
        "react",
        "stage-0"
      ],
      "plugins": []
    }
  }
];

module.exports = {
  devtool: 'eval-source-map',
  entry: path.resolve('js', 'main.js'),
  output: {
    path: path.resolve('build'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [],
  module: {
    loaders: loaders
  }
};

下面是我的main.js文件的副本：

main.js

import React from 'react';
import {render} from 'react-dom';

最后，下面是我安装的节点包的列表：

• 巴别尔芯
• 巴贝尔装载机
• babel-预设-2015年
• 巴贝尔预置反应
• 巴贝尔-预置-阶段-0
• 巴贝尔化
• 反应
• 反应区
• webpack
• webpack开发服务器

有人知道我做错了什么吗？谢谢你的帮忙!

Answer 1

“排除”和“包含”设置需要这些设置的RegExp、绝对路径或数组。您的示例将include属性设置为字符串数组。相反，您需要的是一个RegExp数组：

include: [/.js?$/, /src/, /build/]

第一个参数匹配一个us文件，后两个参数分别匹配src和build文件夹。

注意我是如何忽略对象属性周围的语音标记的。此外，我也只是在module.exports中嵌套加载器内容，而不是将其分离出来，但为了便于论证，我将在原地编辑：

var loaders = [
  {
    test: /\.js?$/,
    exclude: /node_modules/,
    include: ["/.js?&/","/src/", "/build/"],
    loader: "babel",
    query: {
      presets: [
        "es2015",
        "react",
        "stage-0"
      ],
      plugins: []
    }
  }
];

module.exports = {
  devtool: 'eval-source-map',
  entry: path.resolve('js', 'main.js'),
  output: {
    path: path.resolve('build'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [],
  module: {
    loaders: loaders
  }
};