Webpack build error for bootstrap

Question

When I proceeded to build, the following "Warning" occurs. How do I fix this?

And is there no command to build in real time, other than "$ npm run build"? ex) $ sass --watch

Or live preview

  $ npm run build

    > bootstrap-webpack@1.0.0 build /Users/suk/myweb
    > webpack

    Hash: 62314a5e1bd8f234994f
    Version: webpack 4.16.1
    Time: 7100ms
    Built at: 2018-07-18 19:27:20
        Asset     Size  Chunks                    Chunk Names
    bundle.js  328 KiB       0  [emitted]  [big]  main
    [0] ./src/app.js 45 bytes {0} [built]
    [4] (webpack)/buildin/global.js 489 bytes {0} [built]
    [5] ./src/scss/app.scss 1.35 KiB {0} [built]
    [6] ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--4-2!./node_modules/sass-loader/lib/loader.js!./src/scss/app.scss 165 KiB {0} [built]
        + 6 hidden modules

    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

    WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
    This can impact web performance.
    Assets: 
      bundle.js (328 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 (328 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/

Answer 1

WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

This error can be fixed by adding a --mode production(or devevelopment) depending on which env you are targetting. Or, you can also put on your webpack config:

{
  mode: "development"
  ...
}

The other ones are just hints, for you to make your application better, you can ignore them if you want, or you can disable that by adding this to your webpack config:

performance: {hints: false}

To add that to the command line, edit your package.json and add this alogside with webpack:

webpack --mode development .

To have webpack watching for changes:

webpack --mode development --watch