We Keep Coding

aliases not working while using Storybook/vue

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.

React + Webpack don't resolve file loaders

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' }

Fails to compile, when I try to use include with EJS files. (Error: Child compilation failed.)

I already made this a github issue, but I am suspecting there might be something trivial, that I just don't know about.
I would really appreciate some input to help me with the debuging.
Demo:
https://github.com/andrasna/html-ejs-webpack-config-issue-demo
index.ejs
<% const title = 'Hello' %>
<%- include('partial') -%>
<h1><%= `${title} World` %></h1>
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.ejs',
})
]
}
Expected behaviour
I am trying to include one EJS file into another, as per documentation:
https://ejs.co/#docs
<%- include('header'); -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer'); -%>
What I would expect, is for the HTML within partial.ejs to be included in the index.ejs file.
Current behaviour
I get "Error: Child compilation failed" (see full error message below).
However, EJS gets compiled if I remove the line with the include in index.ejs. Which is why I think the problem is specific to includes.
Any ideas?
Error message
> npm start
> html-ejs-webpack-config-issue-demo#1.0.0 start /Users/user/Dev/html-ejs-webpack-config--issue-demo
> webpack-dev-server --mode development
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/user/Dev/html-ejs-webpack-config--issue-demo
✖ ｢wdm｣: Hash: f9f8666f87ab7acd22cd
Version: webpack 4.41.2
Time: 595ms
Built at: 19/10/2019 15:34:18
Asset Size Chunks Chunk Names
index.html 1.72 KiB [emitted]
main.js 360 KiB main [emitted] main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 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.89 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/index.js] 0 bytes {main} [built]
+ 18 hidden modules
ERROR in Error: Child compilation failed:
Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
SyntaxError: Unexpected token )
- Function
- lodash.js:14870
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:14870:16
- lodash.js:473 apply
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:473:27
- lodash.js:15254
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:15254:16
- lodash.js:475 apply
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:475:27
- lodash.js:6563
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:6563:16
- lodash.js:14869 Function.template
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:14869:20
- SyntaxError: Unexpected token )
- compiler.js:79 childCompiler.runAsChild
[html-ejs-webpack-config--issue-demo]/[html-webpack-plugin]/lib/compiler.js:79:16
- Compiler.js:343 compile
[html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compiler.js:343:11
- Compiler.js:681 hooks.afterCompile.callAsync.err
[html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compiler.js:681:15
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[html-ejs-webpack-config--issue-demo]/[tapable]/lib/Hook.js:154:20
- Compiler.js:678 compilation.seal.err
[html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compiler.js:678:31
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[html-ejs-webpack-config--issue-demo]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1423 hooks.optimizeAssets.callAsync.err
[html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compilation.js:1423:35
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs] 922 bytes {0} [built] [failed] [1 error]
ERROR in ./index.ejs (./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs)
Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
SyntaxError: Unexpected token )
at Function (<anonymous>)
at /Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:14870:16
at apply (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:473:27)
at /Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:15254:16
at apply (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:475:27)
at /Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:6563:16
at Function.template (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:14869:20)
at Object.module.exports (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/html-webpack-plugin/lib/loader.js:28:22)
ℹ ｢wdm｣: Failed to compile.

use the ejs-compiled-loader with the HtmlWebpackPlugin
npm install --save-dev ejs-compiled-loader
change webpack.config.js to:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: '!!ejs-compiled-loader!index.ejs', //Here is the Loader plugged in
})
]
}
(as described here)
Then alter your template to valid EJS. HtmlWebpackPlugin says: "By default (if you don't specify any loader in any way) a fallback lodash loader kicks in." It renders the template with lodash as a minimalistic loader. This is why your errors come from lodash.js .
index.ejs:
<% title = 'Hello' %>
<%- include partial -%>
<h1><%= title%> World</h1>
Then npm start and your fresh compiled "Lorem Ipsum ...Hello World" will be served on your localhost.
Or npx webpack --mode=development to get your 'dist/index.html' to enjoy the source :)

Issue with your use-case is your webpack file you are not using ejs compiler.
I made some changes and refactor some bad practice you had.
final code you can find below:
https://gitlab.com/akhileshcoder/ejs-webpack-starter
Now your webpack.config looks like below (as a task/project handler for client)
module.exports = {
devServer: {
inline:true,
port: 8080
},
entry: './src/index.js',
output: {
path: __dirname + '/public/dist',
filename: 'bundle.js',
publicPath: '/public/dist',
library: 'bundle',
libraryTarget: 'var'
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
]
}
]
}
};
and ejb gets render on express as below:
app.set('views', path.join(__dirname, '../views'));
app.set('view engine', 'ejs');
app.get('/', function(req, res, next) {
res.render('index', {title: 'Hello World'});
});

Webpack bundle size increases on every consecutive build

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

Webpack - WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

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