Question

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

/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时我收到了这个错误：

错误：无法找到预设＆＃34; es2015＆＃34;相对于目录＆＃34; me / src / components

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 loader部分添加include: path.resolve(__dirname, "src"),。

您的index.js将是entry: "./src/index.js";

之类的入口点

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

1 个答案: