通过 es6 教程使用 webpack 加载模块问题答案

【问题标题】：Loading modules issue with webpack via es6 tutorial通过 es6 教程使用 webpack 加载模块问题
【发布时间】：2017-03-28 03:55:09
【问题描述】：

我正在关注THIS 教程，试图让模块加载工作，但我一直遇到导入语句不起作用的问题。 import Mortgage from './mortgage2'; - 未捕获的语法错误：意外的令牌输入。

我只有一个文件js/main.js，所以这可能是问题所在（难道不应该编译代码吗？）

我正在运行 npm run webpack，然后是 npm start。

Webpack 配置：

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

 module.exports = {
     entry: './js/main.js',
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'main.bundle.js'
     },
     module: {
         loaders: [
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
                 query: {
                     presets: ['es2015']
                 }
             }
         ]
     },
     stats: {
         colors: true
     },
     devtool: 'source-map'
 };

package.json

{
  "name": "es6-tutorial",
  "version": "1.0.0",
  "description": "Start the tutorial [here](http://ccoenraets.github.io/es6-tutorial).",
  "main": "index.js",
  "scripts": {
    "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
    "start": "http-server",
    "webpack": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ccoenraets/es6-tutorial.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ccoenraets/es6-tutorial/issues"
  },
  "homepage": "https://github.com/ccoenraets/es6-tutorial#readme",
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "http-server": "^0.9.0",
    "webpack": "^2.3.2"
  },
  "dependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "http-server": "^0.9.0",
    "webpack": "^2.3.2"
  }
}

控制台输出：

E:\es6-tutorial>npm run webpack

> es6-tutorial@1.0.0 webpack E:\es6-tutorial
> webpack

(node:22340) DeprecationWarning: loaderUtils.parseQuery() received a non-string
value which can be problematic, see https://github.com/webpack/loader-utils/issu
es/56
parseQuery() will be replaced with getOptions() in the next major version of loa
der-utils.
Hash: 8536c97add80f6d10d01
Version: webpack 2.3.2
Time: 980ms
             Asset     Size  Chunks             Chunk Names
    main.bundle.js  6.64 kB       0  [emitted]  main
main.bundle.js.map  7.62 kB       0  [emitted]  main
   [0] ./js/mortgage2.js 2.23 kB {0} [built]
   [1] ./js/main.js 1.64 kB {0} [built]

请注意，当我加载 localhost 时，最后两个文件不会出现在 chrome 开发工具中。

【问题讨论】：

标签： webpack es6-modules

【解决方案1】：

错过了一步：

在你的代码编辑器中打开index.html，修改标签如下，加载js/main.js的编译版本build/main.bundle.js：

【讨论】：