🦑It should be noted that the result of require ("clean-webpack-plugin) is an object instead of a class. The CleanWebpackPlugin attribute in this object is a class. We use this class to create plug-in objects.
2. copy-webpack-plugin: Its role is to bring some readMe.md, history.md, etc. into the output directory when packing.
2. copy-webpack-plugin: Its role is to bring some readMe.md, history.md, etc. into the output directory when packing.
3) BannerPlugin: Its role is to add some text comments at the head of the packaged js file, such as copyright notes, etc. BannerPlugin is a built-in plugin for webpack, such as:
Five, webpack cross-domain issues
a) Why does webpack have cross-domain issues? Because webpack packages the front-end code, it will eventually be deployed to the front-end server, and the front-end and back-end code are usually deployed on different servers. Even if they are deployed on the same server, the ports used are different.
> When the code obtains data from the back-end server through means such as ajax, there is a cross-domain problem because the front-end and back-end codes are not in the same domain.
> For example, we use webpack's devServer to run and deploy our front-end application code. DevServer starts on port 8080, while the front-end application code requests back-end data through ajax, and the back-end server starts on port 3000.
a) Why does webpack have cross-domain issues? Because webpack packages the front-end code, it will eventually be deployed to the front-end server, and the front-end and back-end code are usually deployed on different servers. Even if they are deployed on the same server, the ports used are different.
> When the code obtains data from the back-end server through means such as ajax, there is a cross-domain problem because the front-end and back-end codes are not in the same domain.
> For example, we use webpack's devServer to run and deploy our front-end application code. DevServer starts on port 8080, while the front-end application code requests back-end data through ajax, and the back-end server starts on port 3000.
🦑Because the front-end code runs in the browser, if the front-end code directly initiates a request to http: // localhost: 3000 / api / test to obtain data through ajax, then due to the influence of the browser's same-origin policy, there will be cross-domain Problem, so you must visit / api / test.
> However, this access will cause 404 problems, because in fact, access is http: // localhost: 8080 / api / test, 8080 server does not have the resource, the solution is to configure a proxy server through devServer
> However, this access will cause 404 problems, because in fact, access is http: // localhost: 8080 / api / test, 8080 server does not have the resource, the solution is to configure a proxy server through devServer
🦑Visit http: // localhost: 8080 / api / test
It will be proxied to http: // localhost: 3000 / api / test, proxy also supports path rewriting, if there is no / api / test path on the 3000 port server, only / test path, then you can perform the path Rewrite, replace / api
It will be proxied to http: // localhost: 3000 / api / test, proxy also supports path rewriting, if there is no / api / test path on the 3000 port server, only / test path, then you can perform the path Rewrite, replace / api
🦑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.
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:
> 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
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:
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: