Recently, I've been delving into webpack and exploring how to integrate various modules. I encountered an issue with two specific modules - bootstrap4 and font-awesome, as they were not getting recognized.
After running npm install <module>, here's a snippet of the updated package.json:
{
"name": "website",
"version": "1.0.0",
"description": "personal blog",
"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"
}
}
The configuration in my webpack.config.js file includes:
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']
}
]
}
}
However, upon executing webpack, errors relating to the bootstrap4 and font-awesome modules arised:
D:\Projects\website\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]
...
... Other built assets are listed here ...
...
ERROR in ./entry.js
Module not found: Error: Can't resolve 'font-awesome' in 'D:\Projects\website\webpack'
@ ./entry.js 16:0-39
ERROR in ./entry.js
Module not found: Error: Can't resolve 'bootstrap4' in 'D:\Projects\website\webpack'
@ ./entry.js 15:0-36
This led me to investigate the entry.js file where I had included both modules:
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')
Why am I facing difficulties with these two modules?
For a detailed error log generated by webpack, see below:
D:\Projects\website\webpack>webpack --display-error-details
Hash: 2501a45f8eacb5b3fdac
Version: webpack 2.7.0
Time: 2952ms
...
... Remaining webpack build details are displayed here...
...