Question

在使用ES6和Babel时，我试图找到有关Webpack和相关导入的一些信息。

我的应用中的简单入口点有一个导入行：

// 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

通过将路径设置为relative：

来解决此问题

// 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'],
  },
};

问题：有没有人知道为什么会有这种差异？或者有关ES6模块导入的相关信息在Webpack文档中的哪些内容？

Answer 1

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

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

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

ES6 Webpack相关导入 - 找不到模块：错误：无法解析模块

1 个答案: