Related articles and reading order

1. Initialize the project

2. Improve the development experience

3. Organize projects and miscellaneous

4. Package the project

5. Team specifications

The project address

preface

After initializing, improving the development experience, integrating a bunch of tools, tweaking the project structure, and so on, it was time to consider project packaging. In this blog post, we don’t consider the configuration of the development and production environments. We only look at the configuration items needed for packaging, so here’s what we need to do: 0. Add the package path tool

  1. Add a package command
  2. Separate CSS and JS
  3. Modify thehtml-webpack-pluginConfiguration items
  4. addreact-loadableandreact-routerFor code separation and load on demand
  5. Add Optimization for separation of third-party library code
  6. Compress code
  7. aboutexternals

Add a package command

Let’s take a look at the output configuration item in webpack.config.js:

webpack
output
package.json
script
build
webpack.config.js

npm run build

Add the package path tool

From the previous step, we already knew that the packaged files are in the dist folder at the root, so the path tool is added to the dist folder: we go to build/utils.js and add the following code:

Separating CSS files

This is because WebPack treats all resources (including JS, CSS, etc.) as chunks and packs them together into a single file. This will result in huge size of packed JS files, which will slow down the page loading speed.

  1. inwebpack 4+In the version, we can usemini-css-extract-pluginDo CSS code separation, so install it firstnpm install -D mini-css-extract-plugin.
  2. And then we go tobuild/plugins.jsAdd this plugin to:
  3. And finally, notice that before, inImprove the development experienceThere’s a little bit of that in this chapter,style-loaderIs used tocss-loaderThe compiled code is converted to JS code and written to a JS file, so here we need to usemini-css-extract-pluginLoader to replacestyle-loaderTo write it to a separate CSS file instead of a JS file: let’s go tobuild/rules/styleRules.jsIn, will be originalstyle-loaderReplace them all withmini-css-extract-pluginLoader (this step can be used to distinguish between development environment and production environment, in this article does not distinguish):
  4. After the above steps, we can package the test: runnpm run buildYou can see that the CSS file has been separated in the packaging result:

    And I’m packing it upindex.htmlYou can also see that the CSS file has been introduced:

  5. Finally, we can wrap the js file with js folder in the package path:

Modify thehtml-webpack-pluginConfiguration items

This step is mainly used to compress a packed index.html file, but there is not much HTML in a single page application, so it doesn’t matter if you do it or not. This article is just an introduction:

  1. First of all inhtml-webpack-pluginIs used inhtml-minifierTo do compression work, so the detailed configuration click in to see, commonly used as follows:
  2. The second one that needs to be mentioned isinjectThis configuration item, which specifies how resources are injected, we just use the default, righttrueIt will inject the JS resource into<body>Label bottom if want to inject into the head fillheadCan be

addreact-loadableandreact-routerFor code separation and load on demand

This step and the next step are to split the code, considering that if all files are crammed into a JS file, the JS file will be bloated, and all the construction of a single page application depends on this JS file, so we need to separate the code and only load the JS file that needs to be built for the current page. Typically, we split the code based on the react-router page and use the react-loadable to load the split code asynchronously (you can also split all the components and load them asynchronously). The react-router page is home, and the router page is page.

  1. First we installreact-router: npm install -S react-router-domAnd then insrc/containers/viewsIn the newHomeandPageComponents:
  2. Then installreact-loadable: npm install -S react-loadableAnd then insrc/containers/sharedIn the newAppComponents:

    And then the ones that are insideindex.tsxReferenced in thereact-routerandreact-loadablePerform component loading on demand: don’t forget to use itreact-hot-loader:

    The important thing to note in this step is,LoadableThe loading parameter in this function is mandatory. You can refer to how to use itreact-loadableGithub link.

  3. At this point go to the page and have a look: in/Path, is not loadedpage.jsThis file while switching to/pageThe path is loadedpage.jsThe file is now loaded on demand:
  4. Finally, if we look at the packed JS file, we can see that it has been separated:

Will useoptimizationThird party library code separation

Optimization is a new configuration item in webpack4+. The main function of this configuration item is to compress and optimize code. In this section, we need to use third-party code in node_modules separation, mainly used in here are two configuration optimization. RuntimeChunk and optimization splitChunks, RuntimeChunk is used to generate the code that maintains the relationship between code blocks, and splitChunks is used to specify the code that needs to be divided into chunks and the file name after the chunks.

  1. We went tobuildCreate a directoryoptimization.jsAnd add the following code:

    Then, inwebpack.config.jsTo introduce this configuration:

  2. And then finally we tried packaging and we found that all the third party code was packagedvendor.jsIn the file:

    You can add by comparisonoptimizationPacked before and afterapp.jsFile to see the effect.

Compress code

In this step, we mainly do js and CSS code compression and optimization

  1. In the previous phase, the js code we packaged was already compressed:

    So at this stage we can useuglifyjs-webpack-pluginMake some compression optimizations: first we need to installnpm install -D uglifyjs-webpack-pluginAnd then go tobuild/optimization.jsTo add the following code, see the code for specific optimization:

    PS: There is a point to note here, inuglifyjs-webpack-pluginThe 2.x version of this plug-in does not support the ES6 specification, so it is recommended to install the 1.x version, and here is the version:

  2. Then we compress the CSS code, which is used hereoptimize-css-assets-webpack-pluginPlug-in:npm install -D optimize-css-assets-webpack-plugin. Let’s go toHomeFeel free to add a style to the component and use it:

    And then you go tobuild/optimization.jsAdd the following code:

    For details about how to use the plug-in, you can view it on Github. Finally, look at the packaged CSS code:

Now that we’ve done the compression step, we’ll finish with the webpack.externals option.

aboutexternals

The webpack.externals configuration item is used to reduce the build time and package size by ignoring the integration of some common packages during the build process. It is also simple to configure and is described briefly in this chapter: In this project, we can add react and react-dom to externals and add their external links to the HTML template:

  1. Let’s go there firstwebpack.config.js, addexternalsOptions, and putreactandreact-domAdd to:

    This configuration item receives an object (see the WebPack documentation for other forms) whose key refers to when Webapck gets the modulerequire, and the corresponding value is the name of the variable you want to mount the module to, in this case, the Window object.

  2. Go to thebuild/tpl/index.htmlIs imported into the CDNreactandreact-domThe link:
  3. Restart the project and it can be found innpm run devCan be used normally, and both external resources have been introduced:
  4. Finally, let’s compare the module occupation after packaging:

    Let’s compare the size of the packages: