爲什麼webpack無法識別bootstrap4和font-awesome模塊？

我正在嘗試使用webpack，並且想要使用bootstrap4和font-awesome等。所有模塊都被識別，除了這兩個。爲什麼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

來源

2017-07-27 WoJ

font-awesome不必是recognised by webpack並且也no index.js in the package任何fields in package.json，因此無法導入如常。假設你想使用CSS文件，所以你可以像這樣導入它。

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

bootstrap4不是一個真正的包。從npm registry - bootstrap4：

安全抱着包

這個包的名字是當前未使用的，而是由另一包以前所佔據。爲了避免惡意使用，npm掛在包名上，但鬆散，我們可能會給你，如果你想要它。

您可以通過聯繫[email protected]並請求該名稱來採用此包。

您需要實際的boostrap package。穩定版本目前爲3.3.7，但v4 alpha可在npm上使用。你可以用它來安裝它：

npm install --save [email protected]

來源

2017-07-27 21:28:20

你的初始斷言大部分是正確的。 s /由webpack識別/默認由webpack /識別。你可以修改'resolve.mainFields'。剛剛閱讀我的答案。 –

你確實可以用webpack製作字體很棒的作品。元素"style"添加到resolve.mainFields：

module.exports = { 

    ... 

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

    ... 
}

前三值來自docs，最後一個來自the font-awesomepackage.json領域：

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

現在的WebPack知道哪裏字體真棒保持它的CSS！請記住，webpack將根據webpack配置字段target爲resolve.mainFields設置默認值;此更改會抵消此行爲，因此您必須閱讀docs以獲取正確的resolve.mainField值。

來源

2017-08-04 02:39:10

爲什麼webpack無法識別bootstrap4和font-awesome模塊？

回答

安全抱着包

相關問題