Webpack is a module packer that takes code resources (JS, CSS) and non-code resources (images, fonts) as modules, combs dependencies according to entry files, and packages them into a static resource.

An Entry for core usage

Concept: By using Entry to specify the entry to the package, font dependencies are constantly added to the diagram for non-code such as images.

Usage: Single entry: Entry is a string (works with only one page and single page references)

module.exports = {
   entry: "./src/index.js"};Copy the code

Multiple entry: Entry is an object (suitable for scenarios with only multiple pages)

module.exports = {
   entry: {app:'./src/app.js'.adminApp:'./src/adminApp.js'}};Copy the code

Output of core usage

Concept: Tells WebPack how to output compiled documents to disk. This configuration is related to Entry, which specifies the packaged entry — corresponding to the source code — and output, which specifies the packaged output — corresponding to the packaged result code

2. Usage of a single entry:

module.exports = {
   entry: "./src/index.js",
    output: {
     filename: "bundle.js",
     path: path.join(__dirname, "dist"),
   },
};
Copy the code

Multi-entry usage: Ensure that the file name is unique by using a placeholder [name]

module.exports = {
   entry:{
   	app:'./src/app.js',
    adminApp:'./src/adminApp.js'
   }
    output: {
     filename: "[name].js",
     path: path.join(__dirname, "dist"),
   },
};
Copy the code

We’ve already written about the single entry example, so let’s take a look at how multiple entries are implemented. Now we’ll add a search.js document to SRC based on the example in the previous section.

document.write('search')
Copy the code

At this time our Webpack configuration also needs to be adjusted accordingly:

"use strict";
const path = require("path");
module.exports = {
   entry: {
       index:"./src/index.js".search :'./src/search.js'
   },
    output: {
 		 path: path.join(__dirname, "dist"),
		 filename: "[name].js",},mode: "production"};Copy the code

So let’s verify our notation

rm -rf dist
npm run build
Copy the code

The directory structure of the packaged file is as follows:

Core usage of Loaders

Concept: WebPack is only supported out of the boxjsandjsonTwo types of files throughloadersTo support other types and convert them into valid modules that can be added to our dependency diagram above,loaderIs essentially a function that takes the source file as an argument and returns the converted content as a result

What are the common loaders?

Usage:

"use strict";
const path = require("path");
module.exports = {
  entry: {
    index: "./src/index.js".search: "./src/search.js",},output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",},module: {
    rules: [{ test: /\.txt$/, use: "raw-loader"}],},mode: "production"};Copy the code

Test: specify the matching rule. Use: specify what loader is used for the rule

Core usage Plugins

Concept: used forbundleFile optimization, resource management, and the injection of environment variables, acting on the entire project build process, can be considered asloadersThere is no way to do things, can be usedpluginsTo operate

Common plugins:

Usage:

"use strict";
const path = require("path");
module.exports = {
  entry: {
    index: "./src/index.js".search: "./src/search.js",},output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",},module: {
    rules: [{ test: /\.txt$/, use: "raw-loader"}],},plugins: [new HtmlWebpackPlugins({ template: "./src/index.html"})].mode: "production"};Copy the code

The plugins you want to use can be placed in the plugins array.

Core usage mode

Concept: Used to specify that the current build environment is: Production, developmen, none. Setting mode can use the built-in parameter of Webpack. The default webpack configuration is Production

Concepts presented in WebPack 4.

Ps: mode concept is a new concept in webpack4 version, you can set some common parameters with one click

Built-in functions of mode: