1 Common concepts

  • Entry: Webpack performs the first step in a build starting with an Entry, which can be abstracted as input (there can be multiple entries).
  • Output: Output the result, after the Webpack has gone through a series of processes and produced the final desired code.
  • Module: Module, in Webpack everything is a Module, a Module corresponds to a file (the essence of a plug-in is just a file, from the plug-in entry file to find the Module that the plug-in depends on). Webpack recursively finds all dependent modules starting from the configured Entry.
  • Chunk: A Chunk is a code block. A Chunk is composed of multiple modules for code merging and splitting (mainly code splitting).
  • Loader: module converter, used to convert the original content of a module into new content as required. (For example, less-loader)
  • Resolve: Defines rules for file resolution
  • Plugin: An extension that uses plug-ins to do the job

2 Common Parameters

1. Entry Common parameters

Parameter names meaning Common values
context The location of the root directory when packing path.resolve(__dirname, ‘app’)
vendor Dependent third-party libraries [(plug-in name)]
Entry type If a string or array is a single entry, an object is a multiple entry

2. The Output Output

Output is an object. An error is reported if it is of another data type.

Parameter names meaning note
filename File name after packaging Necessary, no error will be reported
path Packaged path No error will be reported. No file name will create a file
library With what is the output file exposed For example, the global name exposed by the VUE package is vue configured here
libraryTarget File exposure mode The default is ‘var’, but common frameworks use ‘umd’.

LibraryTarget allows the following values:

Parameter names meaning note
var Package and accept with a declaration variable The default
assign Package and accept with an undeclared variable Global variables may be overwritten
this Mount it on this This can make window
window Mount it on window Mount on Windows, such as map AMap, but make sure Windows exist
global Mounts to the specified global object
commonjs The library will be exported via the CommonJS specification. Export only with exports
commonjs2 The library will be exported through the CommonJS2 specification. For example, the global name exposed by the VUE package is vue configured here
amd AMD mode requir.. Import mode of DEFINE
umd This option attempts to expose the library to the previous module-definition system Basically, compatibility mode. How can you introduce it

Common plugins like Vue and React use UMD, which is where this code comes from

3.Loader

Vue files,.jsx files can be changed into.js files, less, SCSS files can be changed into.css files, which should pay attention to the following:

  • 1. The value of the use attribute must be an array of Loader names. The Loader execution sequence is from last to first.
  • 2. Each Loader can use the URL queryString to pass parameters, such as CSS-loader? Minimize tells CSS-Loader to turn on CSS compression.

4.resolve

Common parameters:

    1. For example, if your img file needs to be referenced frequently, but the previous path is too long to write, you can try this:
alias:{
    "@img":"path.resolve(__dirname, './src/xxx/xxx/xxx/xxx/xxx/xxx/img'),"</br>
}
Copy the code

You can import a from “@img/ a.img”

  • 2. Resolve. Extensions (array), which means webPack will no longer attempt to resolve modules using the default extension. For modules that are imported using their extensions and this is often used in a plug-in, such as a CDN plug-in, the need to import XXX from XXX, or to introduce JQ in vUE can be solved here and you can name global variables here
externals:{
    '$': '$',},Copy the code

5.Plugin

Personally, I think the power of WebPack lies in its huge ecosystem. A variety of plug-ins can meet all your needs. As long as you find the corresponding API and configure it after installation, you can realize the corresponding functions. Not how the plugin connects to WebPack. By the way, plugins accept an array of data types, and errors can occur.

const TerserPlugin = require("terser-webpack-plugin"); Plugins: [(new ZipPlugin({
        path: path.join(__dirname, 'dist'),
        filename: 'dist.zip'.exclude: [/\.map$/"}))"Copy the code