About 14 webpack4 knowledge of fair trade

There is nothing more convincing than the time, because time without notice, we can change everything.     

Recent work uses nuxt, only to find, to learn if webpack 6, nuxt basically no learning, no learning costs, and therefore, this re-record some basic knowledge under webpack4, the next will be configured to optimize a ultimate react scaffolding , but also hope that we can continue to focus, and then configure webpack is to optimize optimization optimization, ha ha ~

Gall strong wine counseling people, I learned this way is to put these things basically three steps,

1. First, the necessary configuration, as well as some of the loader, some plug-ins, like language texts as silent reading, and recite (this step is the most important)
2. Hands to practice, to trial and error
3. Understand its principles

Well, the official start

Foreword

Webpack packer module can be seen: it to do is analyze your project structure, expand find language (Scss, TypeScript, etc.) JavaScript modules as well as some other browsers can not run directly, and package it as appropriate format for browsers.

WebPack and Grunt and Gulp compared to what features

In fact Webpack and the other two did not have much comparable, Gulp / Grunt is a tool to optimize the front end of the development process, and WebPack is a modular solution, but the advantages of Webpack makes Webpack in many scenes Alternatively the tool can Gulp / Grunt class.

1. Entry: entry, the first step in execution of the build Webpack Entry will start, can be abstracted as an input.
2. Module: module, where everything is in Webpack module, a module corresponds to a file. Webpack will be configured to start from the Entry recursively find all dependent modules.
3. Chunk: code block, a combination of a plurality of modules made Chunk, code for merging and segmentation.
4. Loader: converter module, the module for the original content into the new content on demand.
5. Plugin: extension, in particular the timing of the build process Webpack injection expansion logic to change the results of the build or do what you want.
6. Output: output, in Webpack after a series of treatment and obtain the desired output code will eventually result.

1. From zero arrangement

• Initialize the project structure

 

 

2. Configure webpack.config.js

• In the project root directory create webpack.config.js

 

 

3. Configure development server

 

 

4. Packing js

 

 

5. Support ES6, react, vue

 

 

6. The process css, sass, and attribute prefix css3

Processing css

 

 

Dynamic loading and unloadingCSS

style-loader provides the use () and UNUSE () of the object css two ways to load and unload css

For example, to achieve a demand-based switching colors click, modify index.js

 

 

Processing sass

 

 

Css file is extracted as a separate file

 

 

7. output html

 

 

8. The process referenced third-party libraries, exposure to global variables

webpack.ProvidePlugin parameters are key-value pairs in the form, the key is the variable name we used in the project, the value is the key point to library

 

 

9. code splitting, lazy loading (demand loading)

It means carrying loaded when needed, such as a scene, just click the button to load a js.

 

 

10. JS Tree Shaking

 

 

11. Image processing

 

 

12. Clean Plugin and Watch Mode

Empty directories, files, there are changes to repackage

 

 

13. The distinction between environment variables

 

 

14. The development modes webpack-dev-server, proxy

 

 

Here basically is over, I feel helpful, might point a praise , deficiencies, but also look treatise ~

Author: Zhang not counseled
link: https: //juejin.im/post/5cea1e1ae51d4510664d1652
Source: Nuggets
copyright reserved by the authors. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.