我正在尝试使用webpack，并希望使用bootstrap4和font-awesome等。除了这两个模块外，所有模块都被识别。
package.json之后创建的npm install <module>：
{
"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
答案 0 :(得分：0)
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，但v4 alpha在npm上可用。您可以使用以下命令安装它：
npm install --save bootstrap@next
答案 1 :(得分：0)
你确实可以使用webpack很好地使用字体。将元素"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配置字段resolve.mainFields设置target的默认值;此更改会否定此行为，因此您必须阅读docs以获取正确的resolve.mainField值。