My files show as being emitted but they are not actually being copied to dist folder.
Excerpt of compilation log:
Version: webpack 4.15.1 Time: 1824ms Built at: 01/29/2020 3:51:51 PM
Asset Size Chunks Chunk Names
main.js 116 KiB 0 [emitted] main
CSS/main.css 76 bytes [emitted] Images/Uplink_Logo_Horiz.jpg 651 KiB [emitted] [big]
CSS/adminlte.css 708 KiB [emitted] [big]
index.html 6.7 KiB [emitted]
And my webpack config plugin looks like this:
plugins: [
new CopyWebpackPlugin([
{
from: './Images/**',
to: path.join(__dirname, 'dist'),
logLevel: 'trace'
},
{
from: './CSS/**',
to: path.join(__dirname, 'dist'),
logLevel: 'trace'
}
]),
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
I tried changing the order of CopyWebpackPlugin & HtmlWebpackPlugin to no luck. Did you do any other thing to solve this other than just changing the order.
Versions:
"vue": "^2.6.11", "webpack": "^4.15.0", "webpack-cli": "^3.0.8",
"copy-webpack-plugin": "^5.1.1", "html-webpack-plugin": "^3.2.0",
Updated Image:
Full project structure:
Found out the issue. The static files were not included in the VS project. Once I included them it started working. Thanks, for the help :)
Related
We have an asp.net web application in which we've used babel for the last couple of years for minifying and transpiling our javascript files. Here's the webpack.config.js file as I currently have it trying to work in vue compilation.
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: true,
safari10: false,
},
}),
],
},
entry: {
translate: ["#babel/polyfill", "./Scripts/es6/translate.js"],
setupForm: ["./Scripts/es6/setupForm.js"],
signup: ["./Scripts/es6/signup-script.js"],
client: ["./Vue/src/index.js"]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './Scripts/build'),
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}]
},
plugins: [
new VueLoaderPlugin()
]
}
We started a new vue3 app using vite that we want to pull into our existing .net web app. So, the folder structure now looks like
Root
Controllers
Views
packages.json
vue.config.js
webpack.config.js
Vue
src
index.html
index.js
vite.config.js
I've been googling quite a bit on how to do this but can't find a straightforward solution as to what needs to go into our packages.json file, the vue.config.js and webpack.config.js to get this to work. I can run the app fine using vite, but it's the whole build process we're trying to get working where we can specify where we want the compiled vue files to be placed and how to compile them in the first place with webpack/babel.
Here's our current packages.json
{
"name": "webapp",
"version": "1.0.0",
"description": "",
"main": "map_embed.js",
"directories": {
"doc": "docs"
},
"scripts": {
"build": "webpack",
"build-vue": "vue-cli-service build",
"dev": "vite --config Vue/vite.config.js Vue/src"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#fortawesome/vue-fontawesome": "^3.0.1",
"#vue/compiler-sfc": "^3.2.41",
"axios": "^0.25.0",
"core-js": "^3.20.3",
"npm-run-all": "^4.1.5",
"vue": "^3.2.41",
"vue-router": "4.0.5",
"vuex": "4.0.0"
},
"devDependencies": {
"#babel/core": "^7.16.12",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "^7.16.11",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "^5.0.1",
"babel-loader": "^8.2.3",
"node-sass": "^7.0.1",
"sass-loader": "^12.4.0",
"terser-webpack-plugin": "^5.3.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2",
"#vitejs/plugin-vue": "^3.2.0",
"vite": "^3.2.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
And when we build our visual studio project, we have this in the build events which calls the webpack script to do the transformations.
if $(ConfigurationName) == Debug npm run build --prefix $(ProjectDir)
Building the app now results in errors like the following. It mentions You may need an additional loader to handle the result of these loaders but I don't know what loaders we might need.
assets by status 353 KiB [1m[32m[cached][39m[22m 7 assets
5> orphan modules 1.59 MiB [1m[33m[orphan][39m[22m 44 modules
5> runtime modules 221 bytes 1 module
5> modules by path [1m./node_modules/#babel/polyfill/node_modules/core-js/modules/*.js[39m[22m 190 KiB 273 modules
5> modules by path [1m./node_modules/#babel/polyfill/node_modules/core-js/library/[39m[22m 6.43 KiB 18 modules
5> modules by path [1m./node_modules/#babel/polyfill/node_modules/core-js/fn/[39m[22m 1.29 KiB 11 modules
5> modules by path [1m./Scripts/es6/*.js[39m[22m 105 KiB
5> [1m./Scripts/es6/translate.js[39m[22m 1 bytes [1m[33m[built][39m[22m [1m[33m[code generated][39m[22m
5> + 5 modules
5> modules by path [1m./Vue/src/[39m[22m 1.59 MiB
5> [1m./Vue/src/index.js + 41 modules[39m[22m 1.59 MiB [1m[33m[built][39m[22m [1m[33m[code generated][39m[22m
5> + 3 modules
5> modules by path [1m./node_modules/#babel/polyfill/lib/*.js[39m[22m 1.22 KiB
5> [1m./node_modules/#babel/polyfill/lib/index.js[39m[22m 686 bytes [1m[33m[built][39m[22m [1m[33m[code generated][39m[22m
5> [1m./node_modules/#babel/polyfill/lib/noConflict.js[39m[22m 567 bytes [1m[33m[built][39m[22m [1m[33m[code generated][39m[22m
5> + 4 modules
5>
5> [1m[33mWARNING[39m[22m in [1mconfiguration
5> The [1m[31m'mode' option has not been set[39m[22m[1m, webpack will fallback to 'production' for this value.
5> [1m[32mSet 'mode' option to 'development' or 'production'[39m[22m[1m to enable defaults for each environment.
5> You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/[39m[22m
5>
5> [1m[31mERROR[39m[22m in [1m./Vue/src/Components/UI/Card.vue?vue&type=style&index=0&id=4ece4234&scoped=true&lang=css[39m[22m (./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./Vue/src/Components/UI/Card.vue?vue&type=style&index=0&id=4ece4234&scoped=true&lang=css) [1m[32m2:0[39m[22m
5> [1mModule parse [1m[31mfailed[39m[22m[1m: [1m[31mUnexpected[39m[22m[1m token (2:0)
5> File was processed with these loaders:
5> * ./node_modules/vue-loader/dist/index.js
5> You may need an additional loader to handle the result of these loaders.
5> |
5> > .card {
5> | border-radius: 2px;
5> | transition: 0.2s;[39m[22m
5> # ./Vue/src/Components/UI/Card.vue?vue&type=style&index=0&id=4ece4234&scoped=true&lang=css 1:0-173 1:0-173 1:174-336 1:174-336
5> # ./Vue/src/Components/UI/Card.vue 5:0-75
5> # ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./Vue/src/Components/Quotes/Quotes.vue?vue&type=script&lang=js 1:0-34 8:4-8
5> # ./Vue/src/Components/Quotes/Quotes.vue?vue&type=script&lang=js 1:0-194 1:0-194 1:195-378 1:195-378
5> # ./Vue/src/Components/Quotes/Quotes.vue 2:0-57 3:0-52 3:0-52 6:49-55
5> # ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./Vue/src/App.vue?vue&type=script&lang=js 1:0-52 4:4-10
5> # ./Vue/src/App.vue?vue&type=script&lang=js 1:0-179 1:0-179 1:180-348 1:180-348
5> # ./Vue/src/App.vue 2:0-54 3:0-49 3:0-49 6:49-55
5> # ./Vue/src/index.js 2:0-28 15:22-25
I'm working on a web pack based project. I use npm runto check my interface.
Below is my package.json file content.
"scripts": {
"build": "webpack --config webpack.config.prod.js",
"start": "webpack --config webpack.config.dev.js"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.1",
"raw-loader": "^0.5.1",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"script-loader": "^0.7.2",
"style-loader": "^2.0.0",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0"
}
below is my webpack.config.dev.js file content.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { default: merge } = require("webpack-merge")
const superConfig = require('./webpack.config');
module.exports=merge(superConfig,{
devServer:{
port: 3000
},
devtool: false,
mode:'development',
plugins:[new MiniCssExtractPlugin({
filename: 'main.css'
})]
})
In here I have mentioned the port 3000 for npm run.
But
the terminal shows
(node:11002) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
[webpack-cli] Compilation finished
assets by status 2.81 MiB [cached] 15 assets
assets by path . 1.28 MiB
asset main.css 751 KiB [compared for emit] (name: main)
asset main.bundle.js 542 KiB [compared for emit] (name: main)
asset index.html 14.4 KiB [compared for emit]
Entrypoint main 1.26 MiB (2.81 MiB) = main.css 751 KiB main.bundle.js 542 KiB 15 auxiliary assets
runtime modules 931 bytes 4 modules
cacheable modules 530 KiB
modules by path ./node_modules/ 529 KiB
modules by path ./node_modules/admin-lte/plugins/ 472 KiB 8 modules
2 modules
modules by path ./src/ 971 bytes
./src/index.js 465 bytes [built] [code generated]
./src/js/menu.js 456 bytes [built] [code generated]
./src/scss/style.scss 50 bytes [built] [code generated]
css modules 751 KiB
modules by path ./node_modules/admin-lte/plugins/ 77.5 KiB
css ./node_modules/css-loader/dist/cjs.js!./node_modules/admin-lte/plugins/fontawesome-free/css/all.min.css 58 KiB [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/admin-lte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css 19.5 KiB [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/admin-lte/dist/css/adminlte.min.css 673 KiB [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/style.scss 0 bytes [code generated]
webpack 5.9.0 compiled successfully in 5050 ms
and 3000 port doesn't support. But when I open the index.html file in the dist folder it opens very well without any issue.
OK, I got the answer. The solution is to change
"start": "webpack --config webpack.config.dev.js"
to
"start": "webpack serve --config webpack.config.dev.js"
in the package.json file.
Building vue app in production as in:
NODE_ENV=production vue-cli-service build
Adds the static assets hash fingerprints as below:
dist/js/chunk-vendors.d710a916.js 986.81 KiB 297.69 KiB
dist/js/app.ad3f94f2.js 231.00 KiB 56.02 KiB
dist/3115008e.worker.js 30.59 KiB 9.98 KiB
dist/css/app.7eecdb26.css 174.87 KiB 24.16 KiB
dist/css/chunk-vendors.565b13d4.css 42.77 KiB 6.81 KiB
The assets are served with a high maxage cache. Due to some issues involving the headers of these static assets, I want to force renaming all assets, preferably via changing the length of the hash fingerprint (or the algorithm).
So in vue.config.js I added:
module.exports = {
configureWebpack: {
output: {
hashFunction: 'sha256',
hashDigestLength: 8,
},
...
}
The problem is that it affects only dist/3115008e.worker.js (the hash changes, and length increases to 8). All other assets name remain unchanged.
What changes are required to modify the hash fingerprint length (or algorithm) for the chunk-vendors and app assets?
Update:
I ended up forcing assets hash change by modifying the loader's hashType option in vue.config.js(which seem to default to 'md5'):
module.exports = {
...
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.hashType = `sha1`
return options
})
},
I wasn't able to change the hash length. It seems to be hardcoded in #vue/cli-service": "^4.1.2"
I am currently trying to use webpack for the first time in a project and have set up a ASP.NET Core project with the following in the Startup.cs file
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
I have Styles folder which contains some .less files too and I have a webpack.config.js in the root of the project, containing:
const path = require("path");
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env) => {
return [{
mode: 'development', //TODO Make configurable
entry: { 'main': './app.js' },
output: {
path: path.resolve(__dirname, "wwwroot"),
filename: "js/[name].js",
publicPath: "/"
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
module: {
rules: [
{
test: /\.(less)$/,
include: [
path.resolve(__dirname, "Styles")
],
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
}
}];
}
When I run my application, I can see in the output that it is compiling the webpack bundles and I see my files in the js and css folder of wwwroot, which suggests it is finding the webpack config file, I also see lines like below which suggests it is attempting something with the webpack-hot-middleware plugin:
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/querystring-es3/decode.js] 2.45 KiB {main} [built]
[./node_modules/querystring-es3/encode.js] 2.48 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {main} [built]
[./node_modules/webpack-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true] (webpack)-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true 7.68 KiB {main} [built]
but then I don't see any other reference to HMR, and I don't get the [HMR] connected line in the console to signify it has linked up.
Is there anything I am missing in this setup?
I found the problem.....I was being stupid and had forgotten to actually include the is file that is output by webpack, because all I was using for at that point was to compile my less files into CSS!
I am experimenting with webpack and wanted to use, among others, the bootstrap4 and font-awesome. All modules are recognized except these two.
The package.json created after 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"
}
}
The webpack.config.js file I use:
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']
}
]
}
}
Running webpack generates errors for bootstrap4 and 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
The referenced 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')
Why are these two modules a problem?
The complete error log from webpack, for completeness:
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
font-awesome does not have any fields in package.json that are recognised by webpack and there is also no index.js in the package, therefore it can't be imported as usual. Presumably you want to use the CSS file, so you could import it like this.
import 'font-awesome/css/font-awesome.css';
bootstrap4 is not a real package. From the npm registry - bootstrap4:
Security holding package
This package name is not currently in use, but was formerly occupied by another package. To avoid malicious use, npm is hanging on to the package name, but loosely, and we'll probably give it to you if you want it.
You may adopt this package by contacting support#npmjs.com and requesting the name.
You need the actual boostrap package. The stable version is currently 3.3.7, but the v4 alpha is available on npm. You can install it with:
npm install --save bootstrap#next
You can indeed make font-awesome work nicely with webpack. Add the element "style" to resolve.mainFields:
module.exports = {
...
resolve: {
...
mainFields: ["browser", "module", "main", "style"]
...
}
...
}
The first three values come from the docs, and the last one comes from the font-awesome package.json field:
{
...
"style": "css/font-awesome.css",
...
}
Now webpack knows where font-awesome keeps its CSS! Do keep in mind that webpack will set a default value for resolve.mainFields based on the webpack config field target; This change negates this behavior, so you'll have to read the docs for the correct resolve.mainField values.