This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

preface

In essence, Webpack is a static Module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles.

This is how webpack is explained on the website. Speaking of modules, modules are, as their name implies, separate JS files. Similar to the word modularization, colloquial speaking is our usual organization and management code method of an implementation.

Preparation before

Let’s test webPack packaging first.

Initialize the

  1. Create a project directory
mkdir webpackmini
Copy the code
  1. Install webPack dependencies
yarn add webpack -D
Copy the code

or

npm install webpack -D
Copy the code
  1. Install webPack – CLI dependencies

Here, a little note, we can download this version, the latest version of the installation does not seem to be available.

Yarn add [email protected] - DCopy the code

or

NPM install [email protected] - DCopy the code

Create entry file

  1. Create the project home directory
mkdir src
Copy the code
  1. Create entry file
touch main.js
Copy the code
  1. Edit entry file

Let’s use the simplest line of code here.

console.log('maomin1');
Copy the code

Create and edit the WebPack configuration file

Type the command in the project root directory:

touch webpack.config.js
Copy the code

And edit.


const path = require('path');

module.exports = {
    mode:'development'.entry:'./src/main.js'.output: {path:path.resolve(__dirname,'dist'),
        filename:'bundle.min.js'}}Copy the code

Run test packaging

We use the NPX webpack command for packaging. Packing success!

We go to the packaged bundle.min.js file and see the following code:

/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to  create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */
/ * * * * * * / (() = > { // webpackBootstrap
/ * * * * * * / 	var __webpack_modules__ = ({

/ * * * / "./src/main.js":
/ *! * * * * * * * * * * * * * * * * * * * * *! * \! *** ./src/main.js ***! \ * * * * * * * * * * * * * * * * * * * * * /
/ * * * / (() = > {

eval("console.log('maomin1'); \n\n//# sourceURL=webpack://webpackmini/./src/main.js?");

/ * * * / })

/ * * * * * * / 	});
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * / 	
/ * * * * * * / 	// startup
/ * * * * * * / 	// Load entry module and return exports
/ * * * * * * / 	// This entry module can't be inlined because the eval devtool is used.
/ * * * * * * / 	var __webpack_exports__ = {};
/ * * * * * * / 	__webpack_modules__["./src/main.js"] ();/ * * * * * * / 	
/ * * * * * * / })()
;
Copy the code

After we remove the comments, it will be much simpler!

(() = > {
	var __webpack_modules__ = ({
        "./src/main.js":
        (() = > {eval("console.log('maomin1'); \n\n//# sourceURL=webpack://webpackmini/./src/main.js?");})
	});

	var __webpack_exports__ = {};
	__webpack_modules__["./src/main.js"] (); }) ();Copy the code

Preparation of actual combat

Start implementing a basic version of WebPack.

  1. First we create a folder under the project root.
mkdir maominpack
Copy the code
  1. Then, in themaominpackCreate one under the folderbinfolder
mkdir bin
Copy the code
  1. Finally, inbinCreate one under the foldermaominpack.jsfile

Edited as follows:

#! /usr/bin/env node
const fs = require('fs');
const ejs = require('ejs');
const config = require('.. /.. /webpack.config.js');

const entry = config.entry;
const output = `${config.output.path}/ /${config.output.filename}`;
const content = fs.readFileSync(entry,'utf8');

let template = ` (() => { var __webpack_modules__ = ({ "<%-entry%>": (() => { eval("<%-content%>"); })}); var __webpack_exports__ = {}; __webpack_modules__["<%-entry%>"](); }) (); `

let package = ejs.render(template,{
    entry,
    content
});

fs.writeFileSync(output,package);
Copy the code

First, we specify the node environment in the header and introduce the FS module. Then, we introduced ejS dependency, if you are not familiar with EJS, you can go to the official website. Here is a brief introduction.

What does “E” stand for? It can mean Embedded, Effective, Elegant, or Easy. EJS is a simple templating language that helps you generate HTML pages using ordinary JavaScript code. EJS has no dogma on how to organize content; There is no new iteration and control flow syntax; It’s just plain old JavaScript code.

We see assigning a string with a bound value to the template variable. We use ejs.render(), where the first argument is the string we need to process and the second argument is the value we need to modify, which is an object.

  1. inpackage.jsonEdit the file as follows:
{
  "name": "maominpack"."version": "1.0.0"."bin": {"maominpack":"bin/maominpack.js"
  },
  "main": "index.js"."license": "MIT"
}
Copy the code
  1. Create shortcuts for its commands
npm link 
Copy the code
  1. Configure it to use this command in other directories as well
npm config ls
Copy the code
  1. Verify the packaging

Let’s modify SRC /main.js.

console.log('maomin2');
Copy the code

Then, type the command:

maominpack
Copy the code

Finally, check bundle.min.js:


(() = > { 
    var __webpack_modules__ = ({
    
    "./src/main.js":
    (() = > {
    
    eval("console.log('maomin2');"); })});var __webpack_exports__ = {};
         __webpack_modules__["./src/main.js"] (); }) ();Copy the code

Turns out, we packed it. We’ve only implemented the most basic string substitution packaging here, but WebPack has a lot more to offer.

About the author

Author: Vam’s Golden Bean Road. CSDN blog star of the Year 2019, CSDN blog has reached millions of visitors. Nuggets blog post repeatedly pushed to the home page, the total page view has reached hundreds of thousands.

In addition, my public number: front-end experience robbed road, the public continues to update the latest front-end technology and related technical articles. Welcome to pay attention to my public number, let us together in front of the road experience rob it! Go!