es6 的 Webpack 路径问题

Question

我有这样的结构，但在尝试运行 webpack

时遇到错误

    /app
      /main.js
      /foo.js
    /dist
    index.html ( uses <script src="dist/bundle.js"></script>)
    webpackconfig.js

在main.js中：

import foo from './foo'

var foo = new foo()

foo.js:

export class foo {
  constructor() {
    loadScript("//www.parsecdn.com/js/parse-1.4.0.min.js", init());
  }
}

webpackconfig.js

我的配置：

module.exports = {
  context: __dirname + "/app",
  entry: "./main.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  devtool: "#source-map",
  module: {
    loaders: [
      // Transpile any JavaScript file:
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  }
}

但是我得到这个错误：

ERROR in ./main.js
Module not found: Error: Cannot resolve module 'foo'

Answer 1

这是因为 webpack 尝试从 node_modules 目录加载 foo。您必须像这样指定模块的路径：

import foo from './foo'

es6 的 Webpack 路径问题

Webpack paths issue with es6

ecmascript-6

webpack