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)
})
Related
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'),
},
},
});
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'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've error when running file. The command is npm run start-dev. I need your help. thanks!
$ npm run start-dev
Transpeed#0.1.0 start-dev D:\Job\Tsuki Studio\project\transport
NODE_ENV=development webpack -w & NODE_ENV=development nodemon server.js
Webpack is watching the files…
(node:5420) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
Hash: 018f2704f3e72064c88bf0b8b7c42ea6331727b5
Version: webpack 3.1.0
Child
Hash: 018f2704f3e72064c88b
Time: 57611ms
Asset Size Chunks Chunk Names
./public/bundle.js 2.15 MB 0 [emitted] [big] main
./public/bundle.js.map 2.5 MB 0 [emitted] main
[41] ./src/shared/helper/index.js 112 bytes {0} [built]
[224] ./src/shared/reducers/index.js 245 bytes {0} [built]
[225] ./src/shared/routes.js 307 bytes {0} [built]
[298] ./src/browser/index.js 868 bytes {0} [built]
[447] ./src/shared/configureStore.js 515 bytes {0} [built]
[449] ./src/shared/reducers/Authentication.js 638 bytes {0} [built]
[453] ./src/shared/reducers/User.js 319 bytes {0} [built]
[455] ./src/shared/App.js 2.85 kB {0} [built]
[456] ./src/shared/scenes/Dashboard/index.js 3.17 kB {0} [built]
[461] ./src/shared/helper/Cookie.js 600 bytes {0} [built]
[463] ./src/shared/helper/PrivateRoute.js 1.37 kB {0} [built]
[464] ./src/shared/helper/authHeader.js 216 bytes {0} [built]
[465] ./src/shared/helper/store.js 326 bytes {0} [built]
[696] ./src/shared/scenes/Sign/scenes/Login/index.js 6.57 kB {0} [built]
[697] ./src/shared/scenes/Users/index.js 12 kB {0} [built]
+ 725 hidden modules
Child
Hash: f0b8b7c42ea6331727b5
Time: 85705ms
Asset Size Chunks Chunk Names
server.js 2.99 MB 0 [emitted] [big] main
server.js.map 3.69 MB 0 [emitted] main
[43] ./src/shared/helper/index.js 112 bytes {0} [built]
[161] ./src/shared/routes.js 307 bytes {0} [built]
[162] ./src/shared/actions/index.js 47 bytes {0} [built]
[280] ./src/shared/reducers/index.js 245 bytes {0} [built]
[281] ./src/shared/HOC/index.js 51 bytes {0} [built]
[357] ./src/server/index.js 3.02 kB {0} [built]
[547] ./src/shared/scenes/Dashboard/index.js 3.17 kB {0} [built]
[585] ./src/shared/helper/authHeader.js 216 bytes {0} [built]
[586] ./src/shared/helper/store.js 326 bytes {0} [built]
[587] ./src/shared/reducers/Authentication.js 638 bytes {0} [built]
[588] ./src/shared/reducers/User.js 319 bytes {0} [built]
[826] ./src/shared/scenes/Sign/scenes/Login/index.js 6.57 kB {0} [built]
[827] ./src/shared/scenes/Users/index.js 12 kB {0} [built]
[870] ./src/shared/configureStore.js 515 bytes {0} [built]
[873] ./src/shared/App.js 2.85 kB {0} [built]
+ 870 hidden modules
WARNING in ./node_modules/express/lib/view.js
80:29-41 Critical dependency: the request of a dependency is an expression
WARNING in ./node_modules/encoding/lib/iconv-loader.js
9:12-34 Critical dependency: the request of a dependency is an expression
json file: Image of json file
In your package json, in your scripts section add this.
"scripts": {
"prestart": "NODE_ENV=development nodemon server.js",
"start": "node_modules/.bin/webpack -w",
}
Then simply do npm start and first it will run your server and then compile your webpack code in watch mode.