Menu
I was using webpack, and recently updated few packages (babel, babel-loader,..) and see an error in webpack output. but, not sure how to debug further. The application seems to work fine. I tried with various debug options, but not getting a verbose output of the error.
./node_modules/.bin/webpack --config webpack.config.js --progress --profile --colors --display-error-details --display-reasons --debug
NODE_ENV == production : false
6809ms build modules
14ms seal
55ms optimize
30ms hashing
59ms create chunk assets
27ms additional chunk assets
1551ms optimize chunk assets
33ms optimize assets
83ms emit
Hash: 5be1a8485c4110c2f837
Version: webpack 1.9.8
Time: 8674ms
Asset Size Chunks Chunk Names
mww7few.ttf 78.4 kB [emitted]
elilql0.png 7.47 kB [emitted]
client.js 3.98 MB 0 [emitted] main
index.html 130 bytes [emitted]
[0] multi main 52 bytes {0} [built]
factory:0ms building:3ms = 3ms
+ 387 hidden modules
ERROR in undefined
I am not sure what is that ERROR in undefined. I suspect an issue with a loader, as I updated babel-loaderbut not sure how to know more.
568
Click the "inspect" link under each script to open a dedicated debugger or the Open dedicated DevTools for Node link for a session that will connect automatically. You can also check out the NiM extension, a handy Chrome plugin that will automatically open a DevTools tab every time you --inspect a script.
log printed in your terminal you can add a console. log inside webpack. config file. If you are not providing the webpack-dev-server a port your app should run on 80 so opening the browser there and opening the browser console and you should be able to see the "starting!
For simple Webpack projects you can generate a stats file using webpack --json > stats. json . This will create stats. json in your current directory with all the data from your project.
@bsr
I recently had this same problem. It turns out it was from HtmlWebpackPlugin. I forgot to pass a title
new HtmlWebpackPlugin({
....
title: 'Title'
}),
And on my template I had this
<title>{%=o.htmlWebpackPlugin.options.title
So If you use HtmlWebpackPlugin, make sure you pass all the parameters there.
169
This is a bug in the webpack-html-plugin version 1.4 and was fixed in 1.5
The reason for the error is that o.htmlWebpackPlugin.assets is deprecated.
You should use o.htmlWebpackPlugin.files instead to be able to use css and manifest files:
<!DOCTYPE html>
<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest %}"{% } %}>
<head>
<meta charset="UTF-8">
<title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
{% if (o.htmlWebpackPlugin.files.favicon) { %}
<link rel="shortcut icon" href="{%=o.htmlWebpackPlugin.files.favicon%}">
{% } %}
{% for (var css in o.htmlWebpackPlugin.files.css) { %}
<link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
{% } %}
</head>
<body>
{% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
<script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
{% } %}
</body>
</html>
However there is even a simpler way.
The webpack-html-plugin 1.3+ has a feature which will inject all assets (css, favicon, javascript and manifest files) into your template.
So your configuration might look like this:
new HtmlWebpackPlugin({
inject: true,
template: 'template.html',
title: 'Custom template',
})
and the template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
</head>
<body>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
