Webpack未能导入父目录中的模块

Question

我有一个这样的dir结构：

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

package.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配置认为您的工作目录是由上下文定义的。您的上下文设置为someDir，您的组件位于要由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";一样成为一个入口点。