4) Extensions: used to set the import module, if you do not write the module suffix name, webpack will automatically add the suffix to find, extensions is used to set the order of automatically adding suffix, such as:



module.exports = {
resolve: {
extensions: ["js", "vue"]
},
}

🦑If the foo module is introduced in the project, require ("./ foo"), it will first find ./foo.js, if it does not find ./foo.js it will find the ./foo.vue file

Seven, set environment variables

Setting environment variables requires the use of a built-in plugin DefinePlugin provided by webpack, whose role is to set a string value as a global variable, such as:

🦑After this configuration, any module can directly use the DEV_MODE variable, and its value is 'development', which is similar to ProvidePlugin. ProvidePlugin is to inject a module into all modules, and the implementation module can be used directly without introducing it.

Eight, webpack optimization

1) noParse: This configuration is used as an attribute value of the module, that is, some modules are not parsed. The so-called unparsed is not to analyze the dependency relationship in a module, that is, regardless of whether a file is imported (depends on) A certain file, for some independent libraries, such as jquery, there is no dependency at all, jquery will not introduce other libraries (to determine whether to analyze the module based on your own understanding of a module), so we can Let webpack not resolve jquery's dependencies and improve the speed of packaging, such as:

🦑noParse is an attribute in the module configuration, its attribute value is a regular expression, fill in the name of the module that is not resolved.

> In order to show the role of noParse more clearly, suppose we introduce the bar.js module in the entry file index.js, and the bar.js module also introduces the foo.js module, foo.js no longer depends on other modules, then Without using noParse, when webpack is packaged, it will first analyze the index.js module and find that it introduces the bar.js module, then analyzes the bar.js module, finds that it introduces the foo.js module, and then analyzes The foo.js module.

🦑At this time, if noParse: / bar / is used, then when webpack is packaged, it will first analyze the index.js module and find that it introduces the bar.js module, but due to the role of noParse, it will no longer continue to parse bar.js Module, that is, it will not analyze the foo.js module introduced in bar.js. :

> Entrypoint index = index.js
[./src/bar.js] 55 bytes {index} [built]
[./src/index.js] 81 bytes {index} [built]

2) exclude: use exclude in the loader to exclude the processing of files in certain directories, that is, when the files in the specified directory are introduced, the corresponding loader is not used for processing. Exclude is an attribute in the loader configuration, and the attribute value is regular expression Formula, such as

3) Use IgnorePlugin to ignore module references in certain directories in a module. For example, when a module is introduced, the module will introduce a large number of language packages, and we will not use so many language packages. Into the project, it will affect the packaging speed and the size of the final package, and then introduce the language pack that needs to be used, such as:

4) There is a time package in the root directory of the project, and there is a lang package. The lang package contains the js files corresponding to the time output in various languages. The index.js under the time package will introduce all the js files under the lang package, then when we When the time module is introduced, all js files under the lang package will be packaged in, and the following configuration will be added:

🦑 >.When the time module is introduced, if the content of the lang module is introduced into the time module, it is ignored, that is, the content of the lang module is not introduced. It should be noted that this / time / is only matching the folder and the time module The specific directory location has nothing to do, that is, as long as the content in the directory name time is introduced, it will take effect.

4) Use HappyPack: Because there are a large number of files in the packaging process that need to be handed over to a loader for processing, including parsing and conversion operations, and because js is single-threaded, these files can only be processed one by one, and HappyPack's work

> The principle is to give full play to the multi-core function of the CPU, decompose the task into multiple sub-processes to execute concurrently, and then send the results to the main process after the sub-process is processed. Happypack mainly plays a role of task hijacking. Pass in the loader of the corresponding file, that is, the use part. The loader configuration will use the loader packaged by HappyPack for processing, such as:

🦑Only when there are too many files to pack in webpack, you need to use happypack for optimization, because it takes time to start multiple processes, so when there are few files, it is more time-consuming to use happypack to return

5) Pull away from the public module: For a multi-entry situation, if one or some modules are dependent on more than two files, then this module can be pulled out separately, without the need to package these common codes In the output file,

> this will cause code duplication and waste of traffic, that is, if there are two entry files index.js and other.js, they both depend on foo.js, then if you do not pull away from the public module, then foo.js The code in will be packaged into the final output index.js and other.js, that is, there are two copies of foo.js. It is also very simple to pull away from the public module, just configure it in optimization, such as

🦑This will extract the public foo.js module into foo.js in the common directory, but if we also have multiple files that depend on third-party modules such as jquery, if configured as above,

> then jquery will also be packaged into foo In .js, it will cause code confusion, so we want to extract jquery separately, that is, separate from foo.js, we can copy more than one configuration, and achieve it by setting the weight of the code to be extracted, that is, priority to extract jquery, such as:

🦑This will extract foo.js and jquery.js in the common directory at the same time. It should be noted that the extraction of the code must be that the module has not been excluded from packaging, that is, the module will be packaged into the output bundle, if If the third-party module has been excluded from packaging through externals, the above vendor configuration is invalid.

6) On-demand loading, that is, packaging and outputting only when it is needed. Webpack provides the import () method, passing in the module to be dynamically loaded to dynamically load the specified module.

> When webpack encounters the import () statement, The module will not be loaded immediately, but when the module is used, it will be loaded again, that is, it will be packaged together when it is packaged, but it will not be loaded immediately when it is loaded in the browser, but wait When it is used, load it again, for example, a certain module will be loaded after clicking the button, such as:

🦑As you can see, import () returns a Promise object, which mainly uses JSONP to achieve dynamic loading. The res method returned will be different in different export methods. If you use module.exports output, then the returned res is the module .exports output results; if you are using ES6 module output, that is, export default output, the res result returned is res.default, such as:

> {default: "foo", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

7) Turn on the module hot update: The module hot update can update the modified module without refreshing the web page, only compile the changed module, without repacking all the modules, greatly improving the development efficiency. In this case, every time the module is modified, it will be repackaged.

8) To enable hot update of the module, you only need to add hot: true in the devServer configuration. Of course, it is not enough to just enable the hot update of the module. We need to do some operations similar to monitoring. When the monitoring module changes, reload the module and execute, such as: