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

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

巴别核
巴别装载机
巴别预置-ES2015
巴别预置反应的
巴别预置级-0
babelify
反应
反应-DOM
的WebPack
的WebPack-DEV-服务器

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

Answer 1

exclude和include设置需要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
  }
};

Node Webpack无法识别＆＃34;导入＆＃34;

webpack.config.js：

main.js

1 个答案: