我已经开始使用webpack2(准确地说,v2.3.2),在重新创建我的配置后,我一直遇到一个问题,我似乎无法解决我得到(提前为丑陋的转储道歉):

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
  Parsed request is a module
  using description file: [absolute path to my repo]/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    aliased with mapping 'components': '[absolute path to my repo]/src/components' to '[absolute path to my repo]/src/components/DoISuportIt'
      using description file: [absolute path to my repo]/package.json (relative path: ./src)
        Field 'browser' doesn't contain a valid alias configuration
      after using description file: [absolute path to my repo]/package.json (relative path: ./src)
        using description file: [absolute path to my repo]/package.json (relative path: ./src/components/DoISuportIt)
          as directory
            [absolute path to my repo]/src/components/DoISuportIt doesn't exist
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            [absolute path to my repo]/src/components/DoISuportIt doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            [absolute path to my repo]/src/components/DoISuportIt.js doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            [absolute path to my repo]/src/components/DoISuportIt.jsx doesn't exist
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt.js]
[[absolute path to my repo]/src/components/DoISuportIt.jsx]

package.json

{
  "version": "1.0.0",
  "main": "./src/main.js",
  "scripts": {
    "build": "webpack --progress --display-error-details"
  },
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

关于它所抱怨的浏览器字段,我能够找到的文档是:package-browser-field-spec。也有webpack文档,但它似乎默认开启:aliasFields: ["browser"]。我尝试在我的包中添加一个浏览器字段。Json,但这似乎没有任何好处。

webpack.config.js

import path from 'path';
const source = path.resolve(__dirname, 'src');

export default {
  context: __dirname,
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  resolve: {
    alias: {
      components: path.resolve(__dirname, 'src/components'),
    },
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: source,
        use: {
          loader: 'babel-loader',
          query: {
            cacheDirectory: true,
          },
        },
      },
      {
        test: /\.css$/,
        include: source,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            query: {
              importLoader: 1,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

src / main.js

import DoISuportIt from 'components/DoISuportIt';

src /组件/ DoISuportIt / index.jsx

export default function() { ... }

为完整起见,.babelrc

{
  "presets": [
    "latest",
    "react"
  ],
  "plugins": [
    "react-css-modules"
  ],
  "env": {
    "production": {
      "compact": true,
      "comments": false,
      "minified": true
    }
  },
  "sourceMaps": true
}

我做错了什么/遗漏了什么?


当前回答

我的情况与@witheng的回答类似。

在某个时候,我注意到在我的开发环境中的一些文件名中有一些大小写错误。例如,文件名为

type.ts

我把它改名为

Type.ts

在我的Mac开发环境中,这没有注册为git中的更改,所以这个更改没有进入源代码控制。

在基于linux的构建机器中,文件名是区分大小写的,它无法找到具有不同大小写的文件。

为了避免将来出现类似的问题,我在repo中运行了以下命令:

git config core.ignorecase false

其他回答

我的情况与@witheng的回答类似。

在某个时候,我注意到在我的开发环境中的一些文件名中有一些大小写错误。例如,文件名为

type.ts

我把它改名为

Type.ts

在我的Mac开发环境中,这没有注册为git中的更改,所以这个更改没有进入源代码控制。

在基于linux的构建机器中,文件名是区分大小写的,它无法找到具有不同大小写的文件。

为了避免将来出现类似的问题,我在repo中运行了以下命令:

git config core.ignorecase false

我在运行一个GitHub动作时得到这个错误。这个问题是因为我将包列为对等依赖项而不是依赖项。

由于我正在使用Rollup,解决方案是将包同时作为对等依赖项和开发依赖项安装,并使用Rollup -plugin-peer- dps -external从最终构建中删除开发依赖项。

对于任何使用Webpack模块联盟插件的人: 我在插件的“暴露”条目中的一个字段的值中有一个拼写错误。 检查拼写:

exposes: {
            './ShopApp': './src/bootstrap' // check this value
        }

对我来说(哈哈),

我正在通过NPM/Yarn链接导入一个本地包(我正在开发,并使用rollup构建)到我正在开发的另一个包中。导入的包是一个React组件的负载,并配置为具有React和React -dom的peerDependency。

消费包是用Webpack构建的,显然在编译时没有正确地将已安装的react和react-dom库提供给我的本地依赖。

我调整了我的webpack配置,以表明它应该将这些对等依赖项别名为消费包中的正确依赖项:

/* ... */

resolve: {
  extensions: [/* make sure you have them all correct here, as per other answers */],
  alias: {
    react: path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom')
  }
},

/* ... */

显然,为了使用上述方法,你需要在webpack.config.js文件中导入path。

在本文中可以找到更详细的解释

在我的情况下,我在试图使用process.env时不小心导入了这个包:

import * as process from 'process';

去掉它就解决了这个问题。