为什么 webpack 无法识别 bootstrap4 和 font-awesome 模块？答案

【问题标题】：Why are bootstrap4 and font-awesome modules not recognized by webpack?为什么 webpack 无法识别 bootstrap4 和 font-awesome 模块？
【发布时间】：2017-07-27 20:05:33
【问题描述】：

我正在尝试使用 webpack，并且想使用 bootstrap4 和 font-awesome 等。除了这两个之外，所有模块都被识别。

在npm install <module>之后创建的package.json：

{
  "name": "blog",
  "version": "1.0.0",
  "description": "my site",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "bootstrap4": "0.0.1-security",
    "css-loader": "^0.28.4",
    "font-awesome": "^4.7.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "style-loader": "^0.18.2",
    "vue": "^2.3.4"
  }
}

我使用的webpack.config.js 文件：

const path = require('path');

module.exports = {
    entry: path.join(__dirname, 'entry.js'),
    output: {
        path: path.join(__dirname, 'src'),
        filename: 'build.js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]

    }
}

运行webpack 会为bootstrap4 和font-awesome 生成错误：

D:\Dropbox\dev\jekyll\blog\webpack>webpack
Hash: 2501a45f8eacb5b3fdac
Version: webpack 2.7.0
Time: 3028ms
   Asset     Size  Chunks                    Chunk Names
build.js  1.24 MB       0  [emitted]  [big]  main
   [0] ./~/moment/moment.js 129 kB {0} [built]
  [14] ./~/moment/locale/bo.js 3.47 kB {0} [optional] [built]
 [117] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
 [118] (webpack)/buildin/global.js 509 bytes {0} [built]
 [119] (webpack)/buildin/module.js 517 bytes {0} [built]
 [120] ./js/explorer.js 1.35 kB {0} [built]
 [121] ./~/lodash/lodash.js 540 kB {0} [built]
 [122] ./less/navbar.less 1.13 kB {0} [built]
 [123] ./less/style.less 1.12 kB {0} [built]
 [124] ./~/vue/dist/vue.runtime.esm.js 195 kB {0} [built]
 [125] ./entry.js 572 bytes {0} [built]
 [126] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/navbar.less 2.8 kB {0} [built]
 [127] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/style.less 7.67 kB {0} [built]
 [128] ./~/moment/locale ^\.\/.*$ 2.79 kB {0} [optional] [built]
 [129] ./~/process/browser.js 5.42 kB {0} [built]
    + 116 hidden modules

ERROR in ./entry.js
Module not found: Error: Can't resolve 'font-awesome' in 'D:\Dropbox\dev\jekyll\blog\webpack'
 @ ./entry.js 16:0-39

ERROR in ./entry.js
Module not found: Error: Can't resolve 'bootstrap4' in 'D:\Dropbox\dev\jekyll\blog\webpack'
 @ ./entry.js 15:0-36

引用的entry.js：

import Vue from 'vue'
import bootstrap4 from 'bootstrap4'
import fontawesome from 'font-awesome'
import _ from 'lodash'
import moment from 'moment'
require('./less/style.less')
require('./less/navbar.less')
//require('./js/posts.js')
require('./js/explorer.js')
console.log('hello')

为什么这两个模块有问题？

来自webpack的完整错误日志，为了完整性：

D:\Dropbox\dev\jekyll\blog\webpack>webpack --display-error-details
Hash: 2501a45f8eacb5b3fdac
Version: webpack 2.7.0
Time: 2952ms
   Asset     Size  Chunks                    Chunk Names
build.js  1.24 MB       0  [emitted]  [big]  main
   [0] ./~/moment/moment.js 129 kB {0} [built]
  [14] ./~/moment/locale/bo.js 3.47 kB {0} [optional] [built]
 [117] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
 [118] (webpack)/buildin/global.js 509 bytes {0} [built]
 [119] (webpack)/buildin/module.js 517 bytes {0} [built]
 [120] ./js/explorer.js 1.35 kB {0} [built]
 [121] ./~/lodash/lodash.js 540 kB {0} [built]
 [122] ./less/navbar.less 1.13 kB {0} [built]
 [123] ./less/style.less 1.12 kB {0} [built]
 [124] ./~/vue/dist/vue.runtime.esm.js 195 kB {0} [built]
 [125] ./entry.js 572 bytes {0} [built]
 [126] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/navbar.less 2.8 kB {0} [built]
 [127] ./~/css-loader!./~/less-loader/dist/cjs.js!./less/style.less 7.67 kB {0} [built]
 [128] ./~/moment/locale ^\.\/.*$ 2.79 kB {0} [optional] [built]
 [129] ./~/process/browser.js 5.42 kB {0} [built]
    + 116 hidden modules

ERROR in ./entry.js
Module not found: Error: Can't resolve 'font-awesome' in 'D:\Dropbox\dev\jekyll\blog\webpack'
resolve 'font-awesome' in 'D:\Dropbox\dev\jekyll\blog\webpack'
  Parsed request is a module
  using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
    resolve as module
      D:\Dropbox\dev\jekyll\blog\node_modules doesn't exist or is not a directory
      D:\Dropbox\dev\jekyll\node_modules doesn't exist or is not a directory
      D:\Dropbox\dev\node_modules doesn't exist or is not a directory
      D:\Dropbox\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Dropbox\dev\jekyll\blog\webpack\node_modules
        using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
          using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.json doesn't exist
            as directory
              existing directory
                using path: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index
                  using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.json doesn't exist
[D:\Dropbox\dev\jekyll\blog\node_modules]
[D:\Dropbox\dev\jekyll\node_modules]
[D:\Dropbox\dev\node_modules]
[D:\Dropbox\node_modules]
[D:\node_modules]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome.json]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\font-awesome\index.json]
 @ ./entry.js 16:0-39

ERROR in ./entry.js
Module not found: Error: Can't resolve 'bootstrap4' in 'D:\Dropbox\dev\jekyll\blog\webpack'
resolve 'bootstrap4' in 'D:\Dropbox\dev\jekyll\blog\webpack'
  Parsed request is a module
  using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: .)
    resolve as module
      D:\Dropbox\dev\jekyll\blog\node_modules doesn't exist or is not a directory
      D:\Dropbox\dev\jekyll\node_modules doesn't exist or is not a directory
      D:\Dropbox\dev\node_modules doesn't exist or is not a directory
      D:\Dropbox\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Dropbox\dev\jekyll\blog\webpack\node_modules
        using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Dropbox\dev\jekyll\blog\webpack\package.json (relative path: ./node_modules)
          using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4 is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.json doesn't exist
            as directory
              existing directory
                use ./index.js from main in package.json
                  using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: .)
                    Field 'browser' doesn't contain a valid alias configuration
                  after using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: .)
                    using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: ./index.js)
                      no extension
                        Field 'browser' doesn't contain a valid alias configuration
                        D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js doesn't exist
                      .js
                        Field 'browser' doesn't contain a valid alias configuration
                        D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.js doesn't exist
                      .json
                        Field 'browser' doesn't contain a valid alias configuration
                        D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.json doesn't exist
                      as directory
                        D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js doesn't exist
                using path: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index
                  using description file: D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.json doesn't exist
[D:\Dropbox\dev\jekyll\blog\node_modules]
[D:\Dropbox\dev\jekyll\node_modules]
[D:\Dropbox\dev\node_modules]
[D:\Dropbox\node_modules]
[D:\node_modules]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4.json]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js.json]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.js]
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules\bootstrap4\index.json]
 @ ./entry.js 15:0-36

【问题讨论】：

标签： npm webpack npm-install webpack-2

【解决方案1】：

font-awesome没有fields in package.json是recognised by webpack，也有no index.js in the package，所以不能像往常一样导入。大概你想使用 CSS 文件，所以你可以像这样导入它。

import 'font-awesome/css/font-awesome.css';

bootstrap4 不是真正的包。来自npm registry - bootstrap4：

安全持有包

这个包名当前没有被使用，但以前被另一个包占用。为避免恶意使用，npm 会挂在包名上，但很松散，如果您需要，我们可能会将其提供给您。

您可以通过联系 support@npmjs.com 并索取名称来采用此软件包。

您需要实际的boostrap package。稳定版目前是3.3.7，但 npm 上提供了 v4 alpha。你可以安装它：

npm install --save bootstrap@next

【讨论】：

您最初的两个断言大部分都是正确的。 s/被webpack识别/默认被webpack识别/。您可以修改resolve.mainFields。请阅读我的回答。

【解决方案2】：

你确实可以使用 webpack 让 font-awesome 很好地工作。将元素"style" 添加到resolve.mainFields：

module.exports = {

  ...

  resolve: {
    ...
    mainFields: ["browser", "module", "main", "style"]
    ...
  }

  ...
}

前三个值来自docs，最后一个来自the font-awesome package.json字段：

{
  ...
  "style": "css/font-awesome.css",
  ...
}

现在 webpack 知道 font-awesome 将其 CSS 保存在哪里了！请记住，webpack 将根据 webpack 配置字段 target 为 resolve.mainFields 设置默认值；此更改消除了此行为，因此您必须阅读 docs 以获得正确的 resolve.mainField 值。

【讨论】：