🦑Visit http: // localhost: 8080 / api / test

Will be proxied to http: // localhost: 3000 / test

If the front end just wants to mock some data and does not need to actually access the backend server, then we can obtain the built-in server object through the before hook function provided by devServer to process the request. This built-in server object is webpack's devServer, which is port 8080 The server, because it is requesting data in the same server, there will be no cross-domain problems.

We can also start webpack without the devServer provided by webpack, but use our own server to start webapck.

🦑Start webpack through a custom server, so that the front-end code request data in webpack is in the same domain as the server's resources.

> Six, resolve configuration

resolve is used to configure the module's resolution related parameters, and its attribute value is an object.

> modules: tells webpack the directory that should be searched when parsing the module, that is, when the module name is required or imported, where to find it when writing the module name, its attribute value is an array, because multiple module search paths can be configured The search path must be absolute, for example, there is a foo.js file and index.js file under the src directory:

🦑Since the ./src directory is configured as the search directory of the module in resolve.modules, you can search for the foo.js module by writing only the module name in index.js

2) alias: used to alias the path or file. When the path of the import or require module is very long, we can set the path of the module or the entire path name + file name as an alias, and then directly introduce the alias. The module can be found, for example, one module is very deep

🦑It should be noted that alias can map files and paths

3) mainFields: There can be multiple fields in our package.json, which is used to decide which field to import first. For example, the bootstrap module contains js and css.

> The main field in its package.json file corresponds to "dist / js / bootstrap ", the corresponding in the style field is" dist / css / bootstrap.css ", we can change the default introduction by setting the mainFields field, such as:

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: