I'm trying to build a site with tailwind css and vuetify with separate javascript with app.js for the main site and admin.js for the admin dashboard to reduce size. I'm using laravel-mix with code splitting. Here's my current configuration:
const mix = require('laravel-mix');
const path = require('path');
require('vuetifyjs-mix-extension')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.babelConfig({
plugins: ['#babel/plugin-syntax-dynamic-import'],
})
.webpackConfig({
output: {
chunkFilename: 'js/[name].js',
},
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
},
},
});
mix.js('resources/js/admin.js', 'public/js')
.vuetify('vuetify-loader');
if(mix.inProduction()) {
mix.version()
.webpackConfig({
output: {
chunkFilename: 'js/[name].js?id=[chunkhash]',
}
});
} else {
mix.sourceMaps();
}
The problem with this config is the compiled app.css is empty for some reason:
DONE Compiled successfully in 43435ms 10:29:10 AM
Asset Size Chunks Chunk Names
/css/app.css 0 bytes /js/admin, /js/app [emitted] /js/admin, /js/app
/js/admin.js 6.52 MiB /js/admin [emitted] /js/admin
/js/app.js 3.28 MiB /js/app [emitted] /js/app
js/0.js 61.1 KiB 0 [emitted]
js/1.js 76.1 KiB 1 [emitted]
js/10.js 346 KiB 10 [emitted]
js/11.js 283 KiB 11 [emitted]
js/12.js 64.9 KiB 12 [emitted]
js/13.js 82.9 KiB 13 [emitted]
js/14.js 65.5 KiB 14 [emitted]
js/15.js 94.3 KiB 15 [emitted]
js/16.js 78.2 KiB 16 [emitted]
js/17.js 53.2 KiB 17 [emitted]
js/18.js 32.8 KiB 18 [emitted]
js/19.js 15.8 KiB 19 [emitted]
js/2.js 202 KiB 2 [emitted]
js/20.js 15.2 KiB 20 [emitted]
js/21.js 17.8 KiB 21 [emitted]
js/22.js 35.3 KiB 22 [emitted]
js/23.js 40.8 KiB 23 [emitted]
js/24.js 140 KiB 24 [emitted]
js/3.js 74.2 KiB 3 [emitted]
js/4.js 2.01 MiB 4 [emitted]
js/5.js 48.6 KiB 5 [emitted]
js/6.js 118 KiB 6 [emitted]
js/7.js 80.1 KiB 7 [emitted]
js/8.js 55.5 KiB 8 [emitted]
js/9.js 42.2 KiB 9 [emitted]
I managed to solve the problem based on this github issue. I just need to add entry to my css file in webpack config, like this:
.webpackConfig({
entry: {
main: ['./resources/css/app.css']
},
output: {
chunkFilename: 'js/[name].js',
},
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
},
},
});
Related
I'm using Storybook for Vue and I'm trying to add aliases to the webpack config in storybook/main.js:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': path.resolve('src'),
'#': 'src',
'#src': 'src'
},
extensions: ['*', '.js', '.vue', '.json']
},
This is how my file structure looks:
And the error I'm getting:
npm run storybook
> scss-loader-example#0.1.0 storybook /Users/test/Documents/webdev/test/scss-loader-example
> start-storybook -p 6006
info #storybook/vue v5.3.17
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
webpack built c29ceda255d3976f13b9 in 9398ms
✖ ｢wdm｣: Hash: c29ceda255d3976f13b9
Version: webpack 4.42.0
Time: 9398ms
Built at: 2020-03-18 11:41:13
Asset Size Chunks Chunk Names
iframe.html 2.87 KiB [emitted]
main.c29ceda255d3976f13b9.bundle.js 321 KiB main [emitted] [immutable] [big] main
main.c29ceda255d3976f13b9.bundle.js.map 213 KiB main [emitted] [dev] main
runtime~main.c29ceda255d3976f13b9.bundle.js 31.2 KiB runtime~main [emitted] [immutable] runtime~main
runtime~main.c29ceda255d3976f13b9.bundle.js.map 32.3 KiB runtime~main [emitted] [dev] runtime~main
vendors~main.c29ceda255d3976f13b9.bundle.js 2.68 MiB vendors~main [emitted] [immutable] [big] vendors~main
vendors~main.c29ceda255d3976f13b9.bundle.js.map 2.79 MiB vendors~main [emitted] [dev] vendors~main
Entrypoint main [big] = runtime~main.c29ceda255d3976f13b9.bundle.js runtime~main.c29ceda255d3976f13b9.bundle.js.map vendors~main.c29ceda255d3976f13b9.bundle.js vendors~main.c29ceda255d3976f13b9.bundle.js.map main.c29ceda255d3976f13b9.bundle.js main.c29ceda255d3976f13b9.bundle.js.map
[0] multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true 64 bytes {main} [built]
[./.storybook/generated-entry.js] 230 bytes {main} [built]
[./node_modules/#storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/#storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/#storybook/vue/dist/client/index.js] 1.21 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/regenerator-runtime/runtime.js] 23.6 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] (webpack)-hot-middleware/client.js?reload=true&quiet=true 7.68 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] (webpack)-hot-middleware/node_modules/strip-ansi/index.js 161 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {vendors~main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
+ 708 hidden modules
ERROR in ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '#/js/automation-const' in '/Users/test/Documents/webdev/test/scss-loader-example/src/components'
# ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&) 27:0-56 53:13-32
# ./src/components/Balance.vue?vue&type=script&lang=js&
# ./src/components/Balance.vue
# ./stories/1-Button.stories.js
# ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
# ./.storybook/generated-entry.js
# multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
ERROR in ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '#/js/utils/helper' in '/Users/test/Documents/webdev/test/scss-loader-example/src/components'
# ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&) 26:0-39 57:19-25
# ./src/components/Balance.vue?vue&type=script&lang=js&
# ./src/components/Balance.vue
# ./stories/1-Button.stories.js
# ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
# ./.storybook/generated-entry.js
# multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.5 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/#storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/#storybook/core/dist/server/templates/index.ejs] 2.15 KiB {HtmlWebpackPlugin_0} [built]
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
And the paths inside Balance.vue which are causing the issue:
import helper from '#/js/utils/helper'
import automationConstants from '#/js/automation-const'
Any ideas what I'm doing wrong?
I created a separate webpack.config.js file in my .storybook folder and used the following config.
config.resolve.alias = {
...config.resolve.alias,
'#': path.resolve(__dirname, '../src/'),
vue$: 'vue/dist/vue.esm.js'
};
make sure to also add vue$ otherwise the vue compiler will be broken.
I was trying to migrate a typical HTML site to a "light" React app. Therefore, I have installed React without create-react-app.
I configured Webpack and then file-loader to use fonts in the CSS files. But I am still getting errors when compiling because it does not recognize the file loaders (I also tried ttf-loader and url-loader).
I have been reading similar questions but neither of their solutions works on this case.
The project's directory structure looks like this:
webpack.config.js
src
index.js
css
style.css
fonts
pgroofrunners.ttf
This is my current Webpack configuration (webpack.config.js):
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/index'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: ['babel-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
]
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 9000
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html"
})
]
};
So, when I run webpack-dev-server --mode development it compiles but then crashes with the following errors:
C:\Web\pwa-static2>yarn serve
yarn run v1.17.3
$ webpack-dev-server --mode development
i ｢wds｣: Project is running at http://localhost:9000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Web\app1\dist
× ｢wdm｣: Hash: 77bf7ce09014ddcd0764
Version: webpack 4.41.5
Time: 3901ms
Built at: 2020-01-27 13:35:42
Asset Size Chunks Chunk Names
bundle.js 1.43 MiB main [emitted] main
index.html 2.75 KiB [emitted]
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:9000 ./src/index 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/css/style.css] 335 bytes {main} [built] [failed] [1 error]
[./src/index.js] 207 bytes {main} [built]
+ 30 hidden modules
ERROR in ./src/css/style.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #font-face {
| font-family: pgRoofRunners;
| src: url("../fonts/pgroofrunners.ttf");
# ./src/index.js 3:0-25
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 2.99 KiB {0} [built]
[./node_modules/lodash/lodash.js] 528 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.
I guess this is what is crashing the app in **src/css/style.css*:
#font-face {
font-family: pgRoofRunners;
src: url("../fonts/pgroofrunners.ttf");
}
How can I solve this?
It looks like you are importing the CSS somewhere with webpack. In order to understand CSS, webpack needs a loader for that as well. Usually you have something like this in your module.rules:
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
or, if you don't use MiniCssExtractorPlugin:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
Instead of file-loader, I used url-loader (need to be installed).
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
I'm packing a project with webpack in order to use it as a library. It's a components library so I'm generating small bundles for every component that lives in its own directory under src/ui. This is a example component:
src/
|- ui/
|-- anchor/
|- dist/
|- index.js
|- _anchor.scss
I pretend to generate the bundled component in dist/index.js.
With my current Webpack configuration, if I run NODE_ENV=production webpack --display-modules for example, three consecutive times wihtout changing any code, the Webpack outputs are:
Asset Size Chunks Chunk Names
anchor/dist/index.js 4.69 KiB 0 [emitted] anchor
anchor/dist/index.js.map 15.8 KiB 0 [emitted] anchor
Entrypoint anchor = anchor/dist/index.js anchor/dist/index.js.map
[0] external "react" 42 bytes {0} [built]
[1] external "classnames" 42 bytes {0} [built]
[2] ./src/ui/anchors/_anchor.scss 1.94 KiB {0} [built]
[3] ./node_modules/css-loader/dist/runtime/api.js 2.35 KiB {0} [built]
[4] ./src/ui/anchor/index.js + 1 modules 1.69 KiB {0} [built]
| ./src/ui/anchor/index.js 1.41 KiB [built]
| ./node_modules/babel-preset-react-app/node_modules/#babel/runtime/helpers/esm/defineProperty.js 269 bytes [built]
Asset Size Chunks Chunk Names
anchor/dist/index.js 5.7 KiB 0 [emitted] anchor
anchor/dist/index.js.map 14.3 KiB 0 [emitted] anchor
Entrypoint anchor = anchor/dist/index.js anchor/dist/index.js.map
[0] ./src/ui/anchor/dist/index.js 4.69 KiB {0} [built]
[1] external "react" 42 bytes {0} [built]
[2] external "classnames" 42 bytes {0} [built]
Asset Size Chunks Chunk Names
anchor/dist/index.js 6.71 KiB 0 [emitted] anchor
anchor/dist/index.js.map 16.6 KiB 0 [emitted] anchor
Entrypoint anchor = anchor/dist/index.js anchor/dist/index.js.map
[0] ./src/ui/anchor/dist/index.js 5.7 KiB {0} [built]
[1] external "react" 42 bytes {0} [built]
[2] external "classnames" 42 bytes {0} [built]
As you can see, bundle size increases around a 1 KiB on each execution.
My current webpack configuration is:
const path = require('path')
module.exports = {
mode: 'production',
entry: {
anchor: './src/ui/anchor'
},
output: {
path: path.resolve(__dirname, 'src', 'ui'),
filename: '[name]/dist/index.js',
library: ['components', '[name]'],
libraryTarget: 'umd'
},
externals: {
react: 'umd react',
'react-dom': 'umd react-dom',
'prop-types': 'umd prop-types',
classnames: 'umd classnames'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|dist)/,
loader: 'babel-loader',
options: {
presets: [require.resolve('babel-preset-react-app')],
},
enforce: 'pre',
}, {
test: /\.scss$/,
use: [
"css-loader",
"sass-loader"
]
}
]
},
devtool: 'source-map'
}
How can I configure it so bundle 'resets' or stays the same?
In library.filename, you configured the [name] option specifying for every entry you have configured, it'll assign a special name. You would usually only use this parameter if you are using multiple entry points, which I don't see here.
You shouldn't have to "reset" anything when you recompile your Webpack. I'm guessing the file size didn't get infinitely larger after this question, right?
Check this out:
https://github.com/webpack/webpack/tree/master/examples/multi-part-library
When I run webpack in production mode.
There is a warning that asset size limit (exceed).
How can I run without this error?
In my project, I include css, and I see some node_module directory include in the webpack build.
But if I exclude node_module of css it will have the error.
The following is the output when I try to build my project with webpack.
[mai#localhost dssoft]$ yarn run build
yarn run v1.9.2
$ webpack --config webpack.config.js
Hash: a5edfb917e6152759218
Version: webpack 4.16.3
Time: 16592ms
Built at: 08/07/2018 7:58:40 PM
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 19.7 KiB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 17.6 KiB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 22.9 KiB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 44.3 KiB [emitted]
89889688147bd7575d6327160d64e760.svg 106 KiB [emitted]
bundle.js 624 KiB 0 [emitted] [big] main
Entrypoint main [big] = bundle.js
[22] ./node_modules/react-router-dom/es/index.js + 34 modules 80.3 KiB {0} [built]
| 35 modules
[29] ./node_modules/react-bootstrap/es/index.js + 104 modules 301 KiB {0} [built]
| 105 modules
[90] ./js/reducers/index.js 650 bytes {0} [built]
[116] ./node_modules/react-redux/es/index.js + 23 modules 43 KiB {0} [built]
| 24 modules
[121] multi whatwg-fetch ./js/App.js 40 bytes {0} [built]
[122] ./js/App.js 5.17 KiB {0} [built]
[134] ./js/actions/index.js 2.31 KiB {0} [built]
[213] ./js/configureStore.js 1.4 KiB {0} [built]
[221] ./js/pages/Index.js 479 bytes {0} [built]
[222] ./js/pages/Signup.js 8.04 KiB {0} [built]
[227] ./js/pages/Login.js 7.67 KiB {0} [built]
[228] ./js/pages/Logout.js 620 bytes {0} [built]
[229] ./js/pages/NotFound.js 2.86 KiB {0} [built]
[230] ./js/pages/Events.js 3.51 KiB {0} [built]
[244] ./js/App.css 1.04 KiB {0} [built]
+ 231 hidden modules
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
bundle.js (624 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (624 KiB)
bundle.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Done in 20.99s.
Additional webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: [
'whatwg-fetch',
path.resolve(__dirname, 'src', 'App.js')
],
module: {
rules: [
{
test: /\.js$/,
exclude: /\/node_modules\//,
use: {
loader: 'babel-loader',
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public'),
},
};
Webpacks warning size seems out of date. Instead of just ignoring it you can set it to a more meaningful size limit.
module.exports = {
....
},
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
....
}
You can hide these warnings/hints by setting performance.hints = false:
{
performance: {
hints: false
}
}
See the docs for more information.
Of course, the hint is there for a reason and you should look into ways of reducing your bundle size. For example by using code splitting.
performance: {
hints: false
}
hide by this statement
I need to know the hash of the build so I'm trying to capture it in the callback function:
const compiler = webpack(webpackConfig, function (err, stats) {
debug("Hash", stats.hash)
})
But when I'm doing this something weird happens: I'm getting 2 builds and can capture only 1 hash - obviously I need the other one instead of the one in the callback.
Output when having a callback:
app:server Hash +7s ea34c7a4d34baae1c353
webpack built d796ba7633cf5b1023a0 in 6673ms
Hash: ea34c7a4d34baae1c353
Version: webpack 1.13.1
Time: 6649ms
Asset Size Chunks Chunk Names
app.ea34c7a4d34baae1c353.js 1.27 MB 0 [emitted] app
1.counter.ea34c7a4d34baae1c353.js 247 kB 1 [emitted] counter
vendor.ea34c7a4d34baae1c353.js 389 kB 2 [emitted] vendor
app.ea34c7a4d34baae1c353.js.map 1.54 MB 0 [emitted] app
1.counter.ea34c7a4d34baae1c353.js.map 303 kB 1 [emitted] counter
vendor.ea34c7a4d34baae1c353.js.map 466 kB 2 [emitted] vendor
favicon.ico 24.8 kB [emitted]
index.html 595 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 553 kB 0
webpack: bundle is now VALID.
Hash: d796ba7633cf5b1023a0
Version: webpack 1.13.1
Time: 6673ms
Asset Size Chunks Chunk Names
app.d796ba7633cf5b1023a0.js 1.17 MB 0 [emitted] app
vendor.d796ba7633cf5b1023a0.js 389 kB 1 [emitted] vendor
app.d796ba7633cf5b1023a0.js.map 1.42 MB 0 [emitted] app
vendor.d796ba7633cf5b1023a0.js.map 466 kB 1 [emitted] vendor
favicon.ico 24.8 kB [emitted]
index.html 595 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 553 kB 0
webpack: bundle is now VALID.
Output when no callback:
Hash: c5e31d1eb986b7ef318d
Version: webpack 1.13.1
Time: 3891ms
Asset Size Chunks Chunk Names
app.c5e31d1eb986b7ef318d.js 1.26 MB 0 [emitted] app
1.counter.c5e31d1eb986b7ef318d.js 30.6 kB 1 [emitted] counter
vendor.c5e31d1eb986b7ef318d.js 389 kB 2 [emitted] vendor
app.c5e31d1eb986b7ef318d.js.map 1.54 MB 0 [emitted] app
1.counter.c5e31d1eb986b7ef318d.js.map 37.9 kB 1 [emitted] counter
vendor.c5e31d1eb986b7ef318d.js.map 466 kB 2 [emitted] vendor
favicon.ico 24.8 kB [emitted]
index.html 595 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 553 kB 0
webpack: bundle is now VALID.
File: https://github.com/davezuko/react-redux-starter-kit/blob/master/server/main.js
Ok I've found out... In the Webpack's source if there is a callback given to the webpack(options, callback) then it automatically runs itself:
function webpack(options, callback) {
...
if(callback) {
...
compiler.run(callback);
}
return compiler;
}
If someone wants to add a callback do it by adding a plugin as follows:
compiler.plugin("done", stats => {
debug(hash)
})