[wp|4] Clean Up

_________________________

Download code here to follow this lesson.
Navigation: [ < Previous ][ Table of Content ][ Next > ]
_________________________________________________

Let’s do some clean up in this lesson.

We have seen in previous lesson [wp|3] output of webpack were saved to dist/ folder:

Each time we do npm run build the content of dist/ folder will change and we might have files accumulated from previous build. We would like to remove these outdated files in dist/ folder and start from a clean slate.

Let’s install rimraf, a npm package commonly use to remove files and folders:

$ npm i -D --save-exact rimraf

We will add an automatic npm scripts which will evoke rimraf to remove dist/ before script.build executes:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack",
    "prebuild": "rimraf dist",  <-------------[*]
    "server": "http-server dist -p 9090"
  },

As shown in the animated Gif below, when we execute npm run build, previous dist/ folder is removed before a new one is created:

Next thing to do in this lesson is to make our terminal looks good by adding a build progress indicator:

npm i -D progress-bar-webpack-plugin

Add this plugin to webpack.config.js :

const ProgressBarPlugin = require('progress-bar-webpack-plugin'); 
...
plugins: [
    new HtmlWebpackPlugin({
        template: './index.template.html',
        favicon: './favicon.ico'
    }),
    new ProgressBarPlugin() //<------------ [*]
]

Now you will see a build progress bar when webpack is processing your project folder:

We also want to clean up the output in Terminal so that it will not spit out information that we don’t need. We will add the --no-info flag to our npm run dev script in package.json:

"dev": "webpack-dev-server --no-info"

If we do want to see these addition information we can used another script:

"dev:info": "webpack-dev-server"

Our script in package.json now look like:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --no-info",
    "dev:info": "webpack-dev-server",
    "build": "webpack",
    "prebuild": "rimraf dist",
    "server": "http-server dist -p 9090"
  },

The following is the screenshot for when we execute:

$ npm run dev:info

And compare that to terminal screen when we use --n-info flag:

We will also do some reorganization in our webpack-config.js. We add a new properties config.devServer to configure our webpack-dev-server:

const webpackDevServer_host = '0.0.0.0';
const webpackDevServer_port = 8080;
...
const config = {
    devServer: {
            host: webpackDevServer_host,   // [wp|4]
            port: webpackDevServer_port    // [wp|4]
    },
...
};

We also add two constants to hold value of absolutePath:

const absolutePath_sourceFolder = pathResolve('src');
const absolutePath_buildFolder = pathResolve('dist');
...
context: absolutePath_sourceFolder,
...
output: {
        filename: 'bundle.js',
        path: absolutePath_buildFolder,
        publicPath: '/',
    },

And the final webpack.conf.js for this lesson are as follow: