Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

1. WebpackDefault packaging of

Let’s create a basic_webpack directory, open it with VS Code, and create the following directories and files in that directory:

The contents of each file are as follows:

Basic_webpack/SRC/js/format. Js:

const formatPrice = function() {
  return "Selections of 99.98";
}
// CommonJS export
module.exports = {
  formatPrice
};
Copy the code

Basic_webpack/SRC/js/math. Js:

// ES Module export
export function sum(num1, num2) {
  return num1 + num2;
}
Copy the code

Basic_webpack/SRC/index. Js:

// Import sum and formatPrice
import { sum } from './js/math.js';
const { formatPrice } = require('./js/format.js');
// Use sum and formatPrice
console.log(sum(10.20));
console.log(formatPrice(100));
Copy the code

Basic_webpack/index. HTML:

<! DOCTYPEhtml>
<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>Document</title>
</head>
<body>
  
  <script src="./src/index.js"></script>
</body>
</html>
Copy the code

Then, open the index.html file in your browser, open the Console, and view the print:

As you can see, the console reported an error and did not print the results normally. The error message tells us that import statements cannot be used outside a module. Then we can modify the 

<script src="./src/index.js" type="module"></script>
Copy the code

After setting the type of the

As you can see, a new error is reported because the current code is not running on a service. If type=”module” is used on the

Error: require undefined This is because browsers do not support CommonJS imports.

In short, the code written above cannot run directly on the browser. In real development, however, we usually write code in one of these formats (modular approach). But the browser doesn’t know the code, so what? At this point, we can use WebPack to package the code, and the packaged code is recognized by the browser, and then we can use the packaged code.

So how do we use WebPack to package our code? Very simple, we open Terminal (Terminal — New Terminal) in VS Code, first make sure to go to basic_webpack/ directory, You can then run the webpack –version command to see if you can find Webpack in the current directory. If the version information of webpack is displayed normally, it indicates that webpack is found in the current directory. Because we installed it globally. To use webpack in the current directory, we simply run webpack:

You’ll notice that there’s a big chunk of information coming out of the terminal, but let’s ignore that. If you go to the current basic_webpack directory, you will see that there is a dist folder in the basic_webpack directory (dist is a distribution folder), which contains a main.js file. You’ll find some unreadable code inside. In fact, this code is compressed and ugly: the useless code is deleted, and some variable names are simply called…… So we have less code). At this point, the code from the previous three JS files has been compressed into the main.js file. What’s more, the packaged file can be directly recognized by the browser. We can modify the script in index.html that introduces the JS file to refer to the packaged file:

<body>
  <! -- <script src="./src/index.js" type="module"></script> -->
  <script src="./dist/main.js"></script>
</body>
Copy the code

Go to the browser, refresh the page (of course, the Live Server plug-in installed earlier will automatically help us refresh the page), and you can see the result successfully printed in the console:

As you can see, the code that is not directly recognized by the browser is not only compressed into a single file after webpack, but also recognized by the browser.

So that’s the basic use of WebPack (the packaging of JS code).