After all, I cannot resist the temptation of Webpack to share Webpack, Element is an old love, but I will not abandon it. Let's talk briefly about WebpackCopy the code

1 What is Webpack

Webpack is a front-end resource builder, a static module packer. From webpack’s point of view, all the front-end resource files js, JSON, CSS, IMG,…. Will be treated as modules. It will carry out static analysis according to the dependencies of modules and generate corresponding static resources by packaging.

What is a build tool: We do things like TypeScript/ES6 instead of Javascript, JS, or CSS compression, writing CSS in Less, and so on. These things are very time consuming if we do them manually over and over again, so the build tools are designed to get us out of doing things mechanically. Free our hands. It’s simply a matter of putting a bunch of small tools into a big tool, and then we just have to think about the big tool

Webpack five core concepts!

An Entry

The Entry instructs Webpack to start packing with that file as the Entry point and analyze and build the internal dependency diagram.

2 the Output

Where do the Webpack resources go (drive A, B, or C?)? And naming. Once all assets are gathered together, webPack needs to be told where to package the application. The Output attribute of Webpack describes how to deal with bundled code.

Three Loader

Loader enables Webpack to handle non-JS source files (JSX, Scss, Less..) Webpack itself can only understand javaScript (I’ll call him the translator here). By default, webpack can only handle JS modules, So if the user imports an image, webpack cannot handle it, then it will be very embarrassing, So there is a loader mechanism, So loader is actually processing modules, if the image has file-loader, Vue files have vue-loader…

Four Plugins

Plugins! Plugins can do many more things than Loaders can do. In short, Plugins can do many more difficult, complex, and extensive tasks, such as packaging optimization, compression, and so on.

CommonsChunkPlugin: chunks of the same module code extraction into public js CleanWebpackPlugin: clean up ExtractTextWebpackPlugin build directory: CopyWebpackPlugin: To copy the file or folder to the build's output directory HtmlWebpackPlugin: Zip UglifyjsWebpackPlugin: Generates a ZIP package from the packaged resourcesCopy the code

These tasks were given to Plugins

Five Mode

The Mode Mode instructs Webpack to use the configuration of the corresponding Mode

options Description (automatic) The characteristics of
DeveLopent (Development mode) The value of process.env.node_env is set to devlopment. Enable NamedChunksPlugin and NamedModulesPlugin An environment that allows code to be tested locally
Production mode The value of process.env.node_env is set to production enabled FlagDependencyUsagePlugin, flagincludeChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, S IdeEffectSflagPlugin and UglifYjsPlugin An environment that optimizes code to run online

The development model generally focuses on development testing

Production mode is more focused on efficiency and performance

3 summary

The origin of

Before the front-end, JS, CSS and image files needed to be compressed and packaged separately, which was a lot of work for the team. Then the Instagram team wanted to automate these tasks, and webpack came into being.

The second role

For example, if you write a JS file, another person also writes a JS file, the need to merge is very difficult. Now it is very simple to merge with Webpack. There is an independent configuration file, webpack.config.js, which can cut the code into different chunks to load on demand, reduce the initialization time, and has a powerful Plugin (plug-in) interface, mostly internal plug-ins, which is relatively flexible to use