Webpack 5 learning notes (basic part III) -- webpack basic installation and packaging

Before installing webpack, we need to install node first, because webpack is built on node JS.

1. Install node js

Use node JS the latest long term support Version (LTS - Long Term Support) is an ideal start. With older versions, you may encounter various problems because they may lack webpack functionality or related package s.

Node download address - node JS official website

(mac may download. pkg files, windows may download. exe or. msi files)

The next step is to follow the operating steps and click next to install. After the installation is completed, we can view the current node and npm versions on the vscode console (npm - node package manager will be installed with node installation)

2. Install webpack and webpack cli

We can use global installation or local installation

2.1. Global installation

During global installation, we can use global -- global to install,

npm install webpack webpack-cli --global

In this way, webpack can be used in any file directory

After installation, we can view the currently installed version of webpack

However, the global installation will lock your webpack to a certain version, and errors may occur due to version problems during project construction. In addition, during team collaboration, you have installed webpack globally, but other small partners do not know that the project needs to be installed globally. At this time, your project will make mistakes.

Therefore, the global installation of webpack is not recommended.

2.2 local installation

We can initialize it first

npm init -y

Generate a package. In our directory JSON file, and then we use -- save dev to install it locally

npm install  webpack   webpack-cli   --save-dev

# Or specify the version
 npm install  webpack@<version>  --save-dev

After the local installation, we can use the npx command. The npx command will find out whether to install under the current file directory. If not, we will find out whether to install in the upper directory.

If you want to see webpack related commands, you can use

npx webpack --help

3. Basic packaging

We build four files under the current file, including webpack config. The JS file name is webpack, which automatically helps us to read, so it can't be named casually. At the same time, it is in node JS, so we use common JS.


function hello(){
export default hello


import hello from './hello'



<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./hello.js"></script>
    <script src="./index.js"></script> 


const path = require('path')

module.exports = {
	/* Entry file */
    entry : './src/index.js',

    output : {
    	/* Specifies the file name of the output file */
        /* path Absolute path must be used */
        /* Specifies the path to the output file */
	/* Do not define the development or production environment for the time being */
    mode : 'none'

We use npx webpack for packaging

npx webpack

You can see that there is a dist folder under the current file directory, which contains a packaged bundle js

Let's modify the index HTML file import

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./dist/bundle.js"></script>

Then open the current html file in the browser and you can see that the console prints hello, indicating that the basic webpack we configured is OK

Tags: Front-end Webpack npm

Posted by tcollie on Thu, 30 Dec 2021 05:52:42 +1030