Webpack as a module packer, I believe that front-end development partners have a more or less understanding of it. If you’re new to Webpack, hopefully this article will open the door for you.

To understand

What is Webpack?

As I said at the beginning, WebPack is a module packer. At the beginning, Webpack is just a JS packaging tool, now Webpack increasingly powerful, it can not only package JS, but also can package CSS, images and other files.

The basic workings of Webpack

To understand how it works, we need to understand a few basic concepts:

  1. Tree structure: Import resources into the entry file to form a tree of all dependencies.
  2. Modules: For Webpack, all resources are modules.
  3. chunkDuring module packaging, the module file to be manipulated is calledchunk.
  4. bundle:bundleIs a packaged file, which is the “static resource” in the figure above.

With a few concepts in mind, let’s take a quick look at the basic flow:

At its simplest, Webpack takes the pieces of code you’ve already written and packages them up in a tree of dependencies into a package that browsers can understand.

First try

Now you have a rough idea of what WebPack is. We started rolling up our sleeves and giving it a try!

Preparation (installation)

First create a repository directory, then go to the directory, open the terminal, and execute NPM init to initialize the project. After successful initialization, a package.json file will appear in the directory.

Then install Webpack and WebPack-CLI.

Creating a directory structure

Create a directory structure like this at the project root:

  src
  |__ index.js
  |__ one.js
  |__ two.js
Copy the code

Write something in two-.js:

  const a = 10,
        b = 20,
        c = 604;
  module.exports = { a, b, c};
Copy the code

Then introduce two-.js in one.js:

  import { a, b, c } from './two.js';
  export default sum = a+b+c;
Copy the code

Add one.js to index.js:

  const sum = require('./two.js');
  console.log(sum);
Copy the code

Configuration webpack

Before configuration, you need to know the next WebPack configuration items to use:

  • entry: the entry. Tell WebPack which module to use as a starting point for building its internal dependency tree.
  • output: the export. Tell WebPack where to export the bundles it creates and how to name these files.
  • context: used to resolve the configurationentry,loader,pluginRelative path (exceptoutput). aboutloaderandpluginAnd we’ll use it later.

Create a webpack.config.js file in the root directory and start the configuration:

 // Introduces the path package, which nodeJS uses to handle paths
 const path = require('path');
  
  module.exports = {
    Path. resolve resolves./ to an absolute path
    // __dirname points to the absolute path of the current js file
    context: path.resolve(__dirname, '/'),
    // Configure entry
    entry: './src/one.js'.output: {
      filename: 'build.js'.// To set the output directory,path.join uses the current system's path separator to connect paths
      path: path.join(__dirname, 'dist')}};Copy the code

This completes the basic configuration of Webpack, and it’s time to execute webPack commands.

To make it easier to execute, go to package.json and configure the webpack compiler command:

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

Then execute NPM run build at the end of the current directory to execute the webpack command we configured above.