When we re build, we find that the bundle file has significantly reduced its size.

But when we use hash to ensure caching, we find that every build generates different files, and then we introduce another plug-in to help us.

Delete unnecessary files.

npm install --save-dev clean-webpack-plugin

Then modify the configuration file

module.exports = {
//...
  plugins: [
  // Delete only bundle s and manifest files under the dist folder
    new CleanWebpackPlugin(['dist/bundle.*.js','dist/manifest.*.js'], {
    // Print log
      verbose: true,
      // Delete files
      dry: false
    }),
  ]
};

Then when you build, you will find that the above files have been deleted.

Because we have packaged the files into three JS now, and maybe more in the future. Every time we add JS files, we need to add tags manually in HTML.

Now we can do this automatically through a plug-in.

npm install html-webpack-plugin --save-dev

Then modify the configuration file

module.exports = {
//...
  plugins: [
  // Here we use the previous HTML files as templates
  // Note that in the previous HTML file, be sure to delete the JS file that was introduced before.
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
};

Executing the build operation will find that HTML files are generated at the same time, and JS files have been automatically introduced.

On-demand loading code

In this section, we will learn how to load code on demand. Before that, I found that I forgot to add router to the library. You can join this library.

If you re build the library, you will find that the bundle is less than 300KB.

Now our bundle file contains all our own code. But when a user visits our home page, we don't need to load it at all.

This optimization can be accomplished by asynchronous loading of routing for code other than the home page.

Now modify src/router.js

// Note that in the latest version of V4 routing, the mode of on-demand loading has been changed. If V4 is installed, you can go to the official website to learn by yourself.
import React from 'react';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';

import Home from './components/Home';
import ArtistMain from './components/artists/ArtistMain';

const rootRoute = {
  component: Home,
  path: '/',
  indexRoute: { component: ArtistMain },
  childRoutes: [
    {
      path: 'artists/new',
      getComponent(location, cb) {
        System.import('./components/artists/ArtistCreate')
          .then(module => cb(null, module.default))
      }
    },
    {
      path: 'artists/:id/edit',
      getComponent(location, cb) {
        System.import('./components/artists/ArtistEdit')
          .then(module => cb(null, module.default))
      }
    },
    {
      path: 'artists/:id',
      getComponent(location, cb) {
        System.import('./components/artists/ArtistDetail')
          .then(module => cb(null, module.default))
      }
    }
  ]
}

const Routes = () => {
  return (
    <Router history={hashHistory} routes={rootRoute} />
  );
};

export default Routes;

Then execute the build command, and you can see that our bundle file has slimmed down again, and several new files have been added.

Open the HTML file in the browser, and when you click Route Jump, you can see a JS file loaded in the Network column of the developer's tool.

home page

After clicking Random Artist in the upper right corner

auto refresh

Every code update requires a sequential build, and it's a bit cumbersome to wait. This section describes how to use the automatic refresh function.

First install the plug-in

npm i --save-dev webpack-dev-server

Then modify the package. JSON file

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },

Now execute npm directly Rudev can find that the browser automatically opens an empty page and adds new output to the command line.

After waiting for compilation to complete, modify JS or CSS files, you can find that webpack automatically completes compilation for us, and only updates the code that needs to be updated.

But every time you refresh the page, it's not very friendly to debug, so hot replacement of modules is needed. But because React is used in the project,

And Vue or other frameworks have their own set of hot-loader s, so I've skipped it here, and those who are interested can learn it by themselves.

Generating production environment code

Now we can integrate what we learned before with some new plug-ins to build production environment code.