1.2.1 Development Preparation

Before entering the Webpack world, let’s build a Web application using the native approach.

A JavaScript file to write a generic function helloWorld:

02-setup-app/src/hello-world.js

function helloWorld() {
    console.log('Hello world')
}
Copy the code

Create another JavaScript file and call this function:

02-setup-app/src/index.js

helloWorld()
Copy the code

Create an HTML page to reference the two JS files:

02-setup-app/index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title> <script SRC ="./ SRC /index.js"></script> <script SRC ="./ SRC /hello-world.js"></script> </body> </html>Copy the code

The HTML file refers to the index.js file first, and then to the hello-world-js file. The code of the two files is defined before it can be called, so the browser will report the following error:

Adjust the reference order of JS files:

<body> <! <script SRC ="./ SRC /hello-world.js"></script> <script SRC ="./ SRC /index.js"></script> </body>Copy the code

After the browser runs, the following output is displayed:

If the page reference JS file is very few, we can manually adjust the order, but once the page reference a large number of JS files, adjust the order of mental burden and workload can be imagined, how to solve? We’re going to have Webpack.

1.2.2 installation Webpack

  • The premise condition

Before you start, make sure you have the latest version of Node.js installed. Using the latest version of Node.js (LTS-Long Term Support) is an ideal place to start. With older versions, you may run into problems because they may lack webpack functionality or associated packages.

You can choose to download the installation package suitable for your platform and install it yourself, which is not covered in this article.

  • The local installation

The latest official version of Webpack is:

To install the latest version or a specific version, run one of the following commands:

NPM install --save-dev webpack@<version>Copy the code

Tip:

Whether to use –save-dev depends on your application scenario. Assuming you only use Webpack for build operations, it is recommended that you use the –save-dev option at install time, since you may not need webpack in production. Ignore the –save-dev option if you want to apply it to production environments.

If you use WebPack V4 + and want to call Webpack from the command line, you’ll also need to install the CLI.

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

For most projects, we recommend a local installation. This makes it easier to upgrade projects individually when a breaking change version is introduced. Webpack is typically run by running one or more NPM scripts to find the installed Webpack in the local node_modules directory:

"scripts": {
  "build": "webpack --config webpack.config.js"
}
Copy the code

Tip:

To run a locally installed Webpack, you can access its binary version via node_modules/.bin/webpack. Also, if you are using NPM V5.2.0 or later, you can run NPX WebPack to do this.

  • Global installation

Webpack can be made available in a global environment with the following NPM installation:

npm install --global webpack
Copy the code

Tip:

Installing WebPack globally is not recommended. This locks the Webpack in your project to the specified version, and can cause build failures in projects that use different versions of Webpack.

  • Latest Experience Version

If you are keen on using the latest version of Webpack, you can install the beta version using the following command, or install it directly from the WebPack repository:

NPM install --save-dev webpack@next # NPM install --save-dev webpack/webpack#<tagname/branchname>Copy the code

Tip:

Be careful when installing these latest versions of the experience! They may still contain bugs and therefore should not be used in production environments.

  • Our installation

Install Webpack in our project based on the various scenarios above:

/ webPack5 [felix] webPack5 $NPM install webpack webpack-cliCopy the code

1.2.3 run Webpack

Once Webpack is installed, it is ready to run in the project environment. Before we run it, let’s modify the code:

03-try-webpack/src/hello-world.js

Function helloWorld() {console.log('Hello world')} export default helloWorldCopy the code

03-try-webpack/src/index.js

Import helloWorld from './hello-world.js' helloWorld()Copy the code

03-try-webpack/index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, </title> </head> <body> <script SRC ="./ SRC /index.js"></script> </body> </html>Copy the code

Go to the project directory and run Webpack. The result is as follows:

[felix] 03-try-webpack $ npx webpack asset main.js 50 bytes [emitted] [minimized] (name: main) orphan modules 81 bytes [orphan] 1 module ./src/index.js + 1 modules 135 bytes [built] [code generated] WARNING in  configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/ webpack 5.54.0 compiled with 1 warning in 197 msCopy the code

Here, we run Webpack without any configuration (normally you provide a configuration file for Webpack, but now, starting with Webpack4, you can package the file using the default configuration).

There is also a caveat: the “mode” option is not set. We will discuss the “mode” option later in the course.

As a result, Webpack generates a main.js file for us, as shown below:

Let’s take a look at what’s in main.js:

03-try-webpack/dist/main.js

(()=>{"use strict"; console.log("Hello world")})();Copy the code

The generated code is very compact. At this point, you might be asking, which files did this code come from? Back at the terminal, let’s run the command again:

[felix] 03-try-webpack $ npx webpack --stats detailed PublicPath: auto asset main.js 50 bytes {179} [compared for emit] [minimized] (name: main) Entrypoint main 50 bytes = main.js chunk {179} (runtime: main) main.js (main) 180 bytes [entry] [rendered] > ./src main orphan modules 103 bytes [orphan] 1 module ./src/index.js  + 1 modules [860] 180 bytes {179} [depth 0] [built] [code generated] [no exports] [no exports used] ......Copy the code

As you can see, asset main.js is generated from the entry >./ SRC main. So, can we configure the entrance ourselves? See the next section, customizing the Webpack configuration.