The configuration file

The default configuration file for Webpack is webpack.config.js. We can also make a configuration file with webpack –config. For example, we would normally use webpack –config webpack.dev.js in an open environment; In a production environment, use webpack –config webpack.prod.js.

Configuration of

Zero configuration

Starting with WebPack 4.0, WebPack claimed that we didn’t need any configuration to use WebPack for packaging, i.e., “WebPack with zero configuration.”

In a zero-configuration webpack, only the entry and ouput fields are specified, the default entry file is specified as./ SRC /index.js, and the default exit file is specified as./dist/main.js.

Environment set up

Before installing WebPack, we need to install Node.js and NVM first (if you have already installed it, you can skip this), because WebPack is a Node.js dependent environment. NVM (Node.js Version Manager) is the package Manager of Node.js, which can be used to install and switch between different Versions of Node.js:

Install the NVM

NVM official document: github.com/nvm-sh/nvm

  • Install using curl: 
    The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bashCopy the code
  • Install via WGET: 
    Wget - qO - https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bashCopy the code

After the installation is complete, we can run the NVM list to see if the NVM is installed successfully:

The NVM list lists all node versions installed locally.

Installation Node. Js

After NVM is installed, you can use the command line to quickly install and use different versions of Node:

  • Install the latest version of Node: Node is an alias for the latest version

    nvm install node
Copy the code

  • Install the specified version of Node:

    NVM install 16.3.0Copy the code

You can install the latest version and run the node -v and NPM -v commands to check whether the installation is successful:

Install Webpack and WebPack-CLI

First we create a directory and initialize NPM (-y, yes by default) :

  • mkdir my-project
  • cd my-project
  • npm init -y

After successful initialization, we can see the initial package.json file:

Then we install WebPack locally, followed by webPack-CLI (this tool is used to run WebPack on the command line) :

npm install webpack webpack-cli --save-dev
Copy the code

–save-dev, which means the dependency is installed in devDependencies:

{" name ":" my - project ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" test ", "echo \" Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", + "devDependencies": { + "webpack": "^5.61.0", + "webpack-cli": "^4.9.1" +}}Copy the code

We can also print a version of Webpack to see if the installation is successful:

First taste: take 🌰

The current directory structure of our project looks like this:

my-project
|- node_modules
|- package-lock.json
|- package.json
Copy the code

Create a WebPack configuration file

We create webpack.config.js in the my-project directory, and then configure mode, entry, and output to implement the most basic packaging function:

  • mode, the code environment isproduct
  • entry, the entry file is set to./src/index.js
  • output, the export file is set to./dist/bundle.js
// webpack.config.js

const path = require("path");

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

Add project code

Let’s simply add some code that needs to be packaged:

// src/hello.js

export function hello(name) {
  return `hello ${name}! `;
}
Copy the code
// src/index.js

import { hello } from "./hello";

document.write(hello("webpack"));
Copy the code

Use WebPack for packaging

The packaging command is also simple:

npx webpack
Copy the code

After successfully packaging, we will find a dist folder in the project, bundle.js is our packaged code content:

Acceptance of the results

We manually create an index. HTML file in Dist, import the bundled bundle.js file, and open it in a browser to see what it looks like:

You can see that the page output is exactly what you want, and the initial experience with WebPack is simple and enjoyable.

Webpack series

  • preface
  • Extremely brief introduction
  • The core concept
  • Parse the file
  • File listening and hot update
  • File fingerprint Policy
  • Code compression
  • CSS enhancement: Autoprefixer
  • Multi-page Application Packaging Solution (MPA)