Once, the leader said. To determine whether a front-end is good or not, you just need to know whether it has webpack or not. And then…

A fierce operation such as tiger, however, “sometimes, can not a row on the determination of section ah” —– I bought a last year

The past lives of packing tools

Webpack, as the name suggests, is a pack tool for Web applications. For example, what if you travel with a variety of personal belongings? Pack all your belongings in the backpack, whether it’s a charger or a power bank, Durex or Okamoto, all at once.

In the early days, web applications were relatively monotonous. Web pages were usually just a triplets of HTML, CSS and JS. The concept of packaging was nothing more than compression of images and the splicing of various JS files into a single file to solve the problem of excessive loading of resources on a single page. Gulp, etc. However, with the emergence of excellent Web frameworks such as React and Vue, the componentized development thinking has been brought into the front-end field, and the dependence in Web applications tends to be diversified. The requirements of images, fonts, JS transcoding, style preprocessing and so on have emerged. Simple file splicing is a little tired.

This is the time when you need a professional tool called WebPack

Environment set up

First, install NodeJS, and use the latest version if possible. Eslint + VScode self-healing is a great way to fix code.

Install webPack locally (project)

After the project is initialized, run NPM I [email protected] -d to install webpack. Those of you who are careful may have noticed that WebPack is not the most popular version of Webpack 4.x available today, and the reason is simple. Because the 4.x version of Webpack I

Perform the first packaging

The first step of the Great Wall is to initialize the project structure. The directory structure of this project is shown below. The code address

.eslintignore .eslintrc.js
.gitignore
package.json package-lock.json

First, we create the js file index.js for processing and write the contents

console.log('I'm a senior front End engineer.')
Copy the code

Second, create a Webpack configuration file called webpack.config.js in the root directory of the project and write the content

module.exports = {
  // Here is the relative path of the packaged entry file
  entry: './index.js'.output: {
    // The packing result must be stored in an absolute path
    path: '/Users/quanquanluo/workSpace/quanquan/blog-repo/webpack-show/dist'.// Package the result file name
    filename: 'bundle.js',}};Copy the code

By now, with all our belongings and backpacks ready, we’re ready to pack. /node_modules/.bin/webpack (webpack will automatically find the configuration files in the project directory), add the dist directory to the root of the project, and create the bundle.js file in the dist directory. The content of the document is as follows:

/ * * * * * * / (function(modules) { // webpackBootstrap
/ * * * * * * / 	// The module cache
/ * * * * * * / 	var installedModules = {};
/ * * * * * * /
/ * * * * * * / 	// The require function
/ * * * * * * / 	function __webpack_require__(moduleId) {
/ * * * * * * /
/ * * * * * * / 		// Check if module is in cache
/ * * * * * * / 		if(installedModules[moduleId]) {
/ * * * * * * / 			return installedModules[moduleId].exports;
/ * * * * * * / 		}
/ * * * * * * / 		// Create a new module (and put it into the cache)
/ * * * * * * / 		var module = installedModules[moduleId] = {
/ * * * * * * / 			i: moduleId,
/ * * * * * * / 			l: false./ * * * * * * / 			exports: {}
/ * * * * * * / 		};
/ * * * * * * /
/ * * * * * * / 		// Execute the module function
/ * * * * * * / 		modules[moduleId].call(module.exports, module.module.exports, __webpack_require__);
/ * * * * * * /
/ * * * * * * / 		// Flag the module as loaded
/ * * * * * * / 		module.l = true;
/ * * * * * * /
/ * * * * * * / 		// Return the exports of the module
/ * * * * * * / 		return module.exports;
/ * * * * * * / 	}
/ * * * * * * /
/ * * * * * * /
/ * * * * * * / 	// expose the modules object (__webpack_modules__)
/ * * * * * * / 	__webpack_require__.m = modules;
/ * * * * * * /
/ * * * * * * / 	// expose the module cache
/ * * * * * * / 	__webpack_require__.c = installedModules;
/ * * * * * * /
/ * * * * * * / 	// define getter function for harmony exports
/ * * * * * * / 	__webpack_require__.d = function(exports, name, getter) {
/ * * * * * * / 		if(! __webpack_require__.o(exports, name)) {/ * * * * * * / 			Object.defineProperty(exports, name, {
/ * * * * * * / 				configurable: false./ * * * * * * / 				enumerable: true./ * * * * * * / 				get: getter
/ * * * * * * / 			});
/ * * * * * * / 		}
/ * * * * * * / 	};
/ * * * * * * /
/ * * * * * * / 	// getDefaultExport function for compatibility with non-harmony modules
/ * * * * * * / 	__webpack_require__.n = function(module) {
/ * * * * * * / 		var getter = module && module.__esModule ?
/ * * * * * * / 			function getDefault() { return module['default']; } :
/ * * * * * * / 			function getModuleExports() { return module; };
/ * * * * * * / 		__webpack_require__.d(getter, 'a', getter);
/ * * * * * * / 		return getter;
/ * * * * * * / 	};
/ * * * * * * /
/ * * * * * * / 	// Object.prototype.hasOwnProperty.call
/ * * * * * * / 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/ * * * * * * /
/ * * * * * * / 	// __webpack_public_path__
/ * * * * * * / 	__webpack_require__.p = "";
/ * * * * * * /
/ * * * * * * / 	// Load entry module and return exports
/ * * * * * * / 	return __webpack_require__(__webpack_require__.s = 0);
/ * * * * * * / })
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * / ([
/* 0 */
/ * * * / (function(module, exports) {

console.log('I'm a senior front End engineer.');


/ * * * / })
/ * * * * * * / ]);
Copy the code

Is there a book from heaven?

I cleaned it up a little bit, and it looks like this

(function(modules) {
 	function __webpack_require__(moduleId) {
 		modules[moduleId]();
 	}
 	return __webpack_require__(0);
})([
    (function() {
        console.log('I'm a senior front End engineer.'); })]);Copy the code

The packaging process essentially wraps the module around an anonymous self-executing function

The code address of the first package. Of course, as a comely front-end engineer, certainly cannot tolerate/Users/quanquanluo/workSpace/quanquan/blog – repo/webpack – show/dist such a long code, A slight revamp of Webpack.config.js follows

// References the Node native Path module to handle absolute paths
const path = require('path');

module.exports = {
  // Here is the relative path of the packaged entry file
  entry: './index.js'.output: {
    // Packing results must be stored in a position with absolute strength
    path: path.resolve(__dirname, 'dist'),
    // Package the result file name
    filename: 'bundle.js',}};Copy the code

After adjusting the code address, it looks much more comfortable…

Verify the packaged file

Finally, we execute Node dist/bundle.js, and the command line says “I’m a Senior Front-end engineer”. Congratulations on your promotion to senior Front-end Engineer

node index.js