Webpack 无法在父目录中导入模块

Question

我有一个像这样的目录结构:

/src
   /components
     fooComponent.js
     /someDir
        webpack.json
        index.js
        package.json

包.json:

      "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "css-loader": "^0.22.0",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.5.1",
    "webpack": "^1.12.12"
  }

The index json is imported the fooComponent.js like so:

import fooComponent from '../fooComponent'

但是在运行 webpack 时出现此错误:

错误:找不到相对于目录“me/src/components”的预设“es2015”

webpack.config:

module.exports = {
  context: __dirname,
  entry: {
    main: [
      "./index"
    ]
  },
  output: {
    path: __dirname + "/dist",
    filename: "foo.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'}


    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  }
}

Answer 1

webpack 配置认为你的工作目录是由上下文定义的。您的上下文设置为 一些目录 ，您的组件位于要被 babel 转换的目录之外，并将在常规 javascript 文件中处理。

更改配置以使上下文指向 src目录。它将开始转换代码库中的所有文件。

或者您可以使用 include标记以包含要转换的父目录。

试试这样的结构

src/
  components/
    fooComponent.js
  someDir/
    otherJsFiles.js
  index.js
webpack.config.js

将 webpack.config 保留在 src 之外，因为它是构建代码而不是代码本身的配置。然后在你的 js 加载器部分添加 include: path.resolve(__dirname, "src"), .

您的 index.js 将成为 entry: "./src/index.js"; 之类的入口点