javascript - ES6 Webpack 相对导入 - 找不到模块 : Error: Cannot resolve module

Question

我正在尝试查找一些有关 Webpack 和使用 ES6 和 Babel 时的相关导入的信息。

我的应用程序的简单入口点中有一个导入行:

// app.es6
import * as sayHello from 'sayHello';
console.log(sayHello());

sayHello.es6 与 app.es6 位于同一目录。 (sayHello.es6 的内容并不重要)。

当我通过命令行运行 Webpack 编译器时:

$ webpack

我收到以下错误:

ERROR in ./app/app.es6
Module not found: Error: Cannot resolve module 'sayHello' in /Users/username/Code/projectname/app

这可以通过将路径设置为相对路径来解决:

// app.es6 - note the ./ in the import
import * as sayHello from './sayHello';
console.log(sayHello());

这有点麻烦，因为它与 Babel 网站上模块部分下的示例 es6 代码不同。

这是我的 Webpack 配置:

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

module.exports = {
  entry: [
    'babel-polyfill',
    './app/app.es6'
  ],
  output: {
      publicPath: '/',
      filename: './dist/app.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js|\.es6$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query:
        {
          presets:['es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.es6'],
  },
};

问题:有谁知道为什么会出现这种差异？或者 Webpack 文档中有关 ES6 模块导入的相关信息在哪里？

Answer 1

这是设计使然，没有前缀表示模块应该从 node_modules 目录加载。您可以在 webpack 配置中设置别名，这将消除相对模块导入的需要

resolve: {
  alias: { 
    sayHello: '/absolute/path/to/sayHello'
  },
  extensions: ['', '.js', '.es6']
}

然后 Webpack 将填补导入语句中的空白，并允许您省略相对路径，并且 import * as sayHello from 'sayHello'; 将在整个项目中工作