节点网页包无法识别“导入”

Question

所以我对Node和Webpack还不熟悉，我很难让我的项目正确编译。每次我将其加载到浏览器时，都会出现错误：未捕获的语法错误：意外的令牌导入。这是我的一份网页。配置。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
  }
};

这是我的主要作品的副本。js文件：

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

最后，这里是我已安装的节点包的列表：

• Babel-core
• Babel-loader
• Babel-preet-es2015
• 巴贝尔-预设-反应
• 巴贝尔-预设-阶段-0
• Babelify
• 反应
• report-dom
• webpack
• webpack-dev-server

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

Answer 1

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

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

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

请注意，我是如何省略对象属性周围的语音标记的。此外，我还将加载程序内容嵌套在模块中。导出，而不是将其分离出来，但为了论证，我将现场编辑：

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
  }
};