Webpack configuration

1. The webpack is introduced

WebpackIs a front-end resource loading/packaging tool. It performs static analysis based on module dependencies, and then generates the corresponding static resources from these modules according to the specified rules.

2. Prepare knowledge

2.1 toStringTag

Symbol.toStringTagIs a built-in symbol that is usually used as the property key of an object. The corresponding property value should be a string that represents the custom type label of the object
Usually only built-inObject.prototype.toString()The method reads the tag and includes it in its return value.

console.log(Object.prototype.toString.call("foo")); // "[object String]"
console.log(Object.prototype.toString.call([1, 2])); // "[object Array]"
console.log(Object.prototype.toString.call(3)); // "[object Number]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
let myExports = {};
Object.defineProperty(myExports, Symbol.toStringTag, { value: "Module" });
console.log(Object.prototype.toString.call(myExports)); //[object Module]
Copy the code

[object String]
[object Array]
[object Number]
[object Boolean]
[object Undefined]
[object Null]
[object Module]
Copy the code

2.2 defineProperty

The defineProperty method directly defines a new property on an object or modifies an existing property of an object and returns the object.
- Obj The object on which attributes are to be defined.
- Prop Specifies the name of the property to define or modify.
- Descriptor Property descriptor to be defined or modified.

let obj = {}; var ageValue = 10; Object.defineproperty (obj, "age", {//writable: true, // can be modified //value: 10, //write () {return ageValue; }, set(newValue) { ageValue = newValue; }, enumerable: true, // can enumerate different: true, // can be configured and deleted}); console.log(obj.age); obj.age = 20; console.log(obj.age);Copy the code

3. Synchronize loading

3.1 Installing modules

cnpm i webpack webpack-cli html-webpack-plugin clean-webpack-plugin -D
Copy the code

3.2 webpack. Config. Js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {},
  plugins: [
    new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["**/*"] }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    }),
  ],
  devServer: {},
};
Copy the code

3.2 the index. Js

src\index.js

let title = require("./title.js");
console.log(title);
Copy the code

3.3 title. Js

src\title.js

module.exports = "title";
Copy the code

3.4 the index. HTML

src\index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial =1.0" /> <title>webpack</title> </head> <body></body> </ HTML >Copy the code

3.5 package. Json

package.json

  "scripts": {
    "build": "webpack"
  }
Copy the code

3.6 Packing Files

(() => { var modules = ({ "./src/title.js": ((module) => { module.exports = "title"; })}); var cache = {}; function require(moduleId) { if (cache[moduleId]) { return cache[moduleId].exports; } var module = cache[moduleId] = { exports: {} }; modules[moduleId](module, module.exports, require); return module.exports; } (() => { let title = require("./src/title.js"); console.log(title); }) (); }) ();Copy the code

4. Compatibility implementation

4.1 common.js Loads common.js

4.4.1 index. Js

let title = require("./title");
console.log(title.name);
console.log(title.age);
Copy the code

4.1.2 title. Js

exports.name = "title_name";
exports.age = "title_age";
Copy the code

4.1.3 main. Js

(() => { var modules = ({ "./src/title.js": ((module, exports) => { exports.name = "title_name"; exports.age = "title_age"; })}); var cache = {}; function require(moduleId) { if (cache[moduleId]) { return cache[moduleId].exports; } var module = cache[moduleId] = { exports: {} }; modules[moduleId](module, module.exports, require); return module.exports; } (() => { let title = require("./src/title.js"); console.log(title.name); console.log(title.age); }) (); }) ();Copy the code

4.2 Common.js Loads the ES6 modules

2 index. Js

let title = require("./title");
console.log(title);
console.log(title.age);
Copy the code

4.2.2 title. Js

export default "title_name";
export const age = "title_age";
Copy the code

Holdings main. Js

(() => {
  var modules = ({
    "./src/title.js":
      ((module, exports, require) => {
        require.renderEsModule(exports);
        require.defineProperties(exports, {
          "default": () => DEFAULT_EXPORT,
          "age": () => age
        });
        const DEFAULT_EXPORT = "title_name";
        const age = "title_age";
      })
  });
  var cache = {};
  function require(moduleId) {
    if (cache[moduleId]) {
      return cache[moduleId].exports;
    }
    var module = cache[moduleId] = {
      exports: {}
    };
    modules[moduleId](module, module.exports, require);
    return module.exports;
  }
  require.defineProperties = (exports, definition) => {
    for (var key in definition) {
      Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
    }
  };
  require.renderEsModule = (exports) => {
    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    Object.defineProperty(exports, '__esModule', { value: true });
  };
  (() => {
    let title = require("./src/title.js");
    console.log(title);
    console.log(title.age);
  })();
})();
Copy the code

4.3 ES6 Modules Load the ES6 modules

4.3.1 index. Js

import name, { age } from "./title";
console.log(name);
console.log(age);
Copy the code

4.3.2 title. Js

export default name = "title_name";
export const age = "title_age";
Copy the code

4.3.3 main. Js

(() => { var modules = ({ "./src/index.js": ((module, exports, require) => { require.renderEsModule(exports); var title = require("./src/title.js"); console.log(title.default); console.log(title.age); }), "./src/title.js": ((module, exports, require) => { require.renderEsModule(exports); require.defineProperties(exports, { "default": () => DEFAULT_EXPORT, "age": () => age }); const DEFAULT_EXPORT = (name = "title_name"); const age = "title_age"; })}); var cache = {}; function require(moduleId) { if (cache[moduleId]) { return cache[moduleId].exports; } var module = cache[moduleId] = { exports: {} }; modules[moduleId](module, module.exports, require); return module.exports; } require.defineProperties = (exports, definition) => { for (var key in definition) { Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); }}; require.renderEsModule = (exports) => { Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); Object.defineProperty(exports, '__esModule', { value: true }); }; require("./src/index.js"); }) ();Copy the code

4.4 ES6 modules Load common.js

4.4.1 index. Js

import name, { age } from "./title";
console.log(name);
console.log(age);
Copy the code

4.4.2 title. Js

module.exports = {
  name: "title_name",
  age: "title_age",
};
Copy the code

4.4.3 main. Js

(() => { var modules = ({ "./src/index.js": ((module, exports, require) => { require.renderEsModule(exports); var title = require("./src/title.js"); var title_default = require.n(title); console.log((title_default())); console.log(title.age); }), "./src/title.js": ((module) => { module.exports = { name: "title_name", age: "title_age", }; })}); var cache = {}; function require(moduleId) { if (cache[moduleId]) { return cache[moduleId].exports; } var module = cache[moduleId] = { exports: {} }; modules[moduleId](module, module.exports, require); return module.exports; } require.n = (module) => { var getter = module && module.__esModule ? () => module['default'] : () => module; return getter; };; require.defineProperties = (exports, definition) => { for (var key in definition) { Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); }}; require.renderEsModule = (exports) => { Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); Object.defineProperty(exports, '__esModule', { value: true }); }; require("./src/index.js"); }) ();Copy the code

5. Asynchronous loading

5.1 webpack. Config. Js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {},
  plugins: [
    new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["**/*"] }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    }),
  ],
  devServer: {},
};
Copy the code

5.2 the SRC \ index. Js

src\index.js

import(/* webpackChunkName: "hello" */ "./hello").then((result) => {
    console.log(result.default);
});
Copy the code

5.3 hello. Js

src\hello.js

export default 'hello';
Copy the code

5.4 dist \ main js

(() => { var modules = ({}); var cache = {}; function require(moduleId) { if (cache[moduleId]) { return cache[moduleId].exports; } var module = cache[moduleId] = { exports: {} }; modules[moduleId](module, module.exports, require); return module.exports; } require.m = modules; require.defineProperties = (exports, definition) => { for (var key in definition) { if (require.ownProperty(definition, key) && ! require.ownProperty(exports, key)) { Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); }}}; require.find = {}; require.ensure = (chunkId) => { let promises = []; require.find.jsonp(chunkId, promises); return Promise.all(promises); }; require.unionFileName = (chunkId) => { return "" + chunkId + ".main.js"; }; require.ownProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop) require.load = (url) => { var script = document.createElement('script'); script.src = url; document.head.appendChild(script); }; require.renderEsModule = (exports) => { if (typeof Symbol ! == 'undefined' && Symbol.toStringTag) { Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); } Object.defineProperty(exports, '__esModule', { value: true }); }; require.publicPath = ''; var installedChunks = { "main": 0 }; require.find.jsonp = (chunkId, promises) => { var promise = new Promise((resolve, reject) => { installedChunkData = installedChunks[chunkId] = [resolve, reject]; }); promises.push(installedChunkData[2] = promise); var url = require.publicPath + require.unionFileName(chunkId); require.load(url); }; var webpackJsonpCallback = (data) => { var [chunkIds, moreModules] = data; var moduleId, chunkId, i = 0, resolves = []; for (; i < chunkIds.length; i++) { chunkId = chunkIds[i]; resolves.push(installedChunks[chunkId][0]); installedChunks[chunkId] = 0; } for (moduleId in moreModules) { require.m[moduleId] = moreModules[moduleId]; } while (resolves.length) { resolves.shift()(); } } var chunkLoadingGlobal = window["webpack5"] = window["webpack5"] || []; chunkLoadingGlobal.push = webpackJsonpCallback; require.ensure("hello").then(require.bind(require, "./src/hello.js")).then((result) => { console.log(result.default); }); }) ();Copy the code

5.5 hello. Main. Js

hello.main.js

(window["webpack5"] = window["webpack5"] || []).push([["hello"], {
  "./src/hello.js":
    ((module, exports, __webpack_require__) => {
      "use strict";
      __webpack_require__.renderEsModule(exports);
      __webpack_require__.defineProperties(exports, {
        "default": () => DEFAULT_EXPORT
      });
      const DEFAULT_EXPORT = ('hello');
    })
}]);
Copy the code

1. The webpack is introduced

2. Prepare knowledge

2.1 toStringTag

2.2 defineProperty

3. Synchronize loading

3.1 Installing modules

3.2 webpack. Config. Js

3.2 the index. Js

3.3 title. Js

3.4 the index. HTML

3.5 package. Json

3.6 Packing Files

4. Compatibility implementation

4.1 common.js Loads common.js

4.4.1 index. Js

4.1.2 title. Js

4.1.3 main. Js

4.2 Common.js Loads the ES6 modules

2 index. Js

4.2.2 title. Js

Holdings main. Js

4.3 ES6 Modules Load the ES6 modules

4.3.1 index. Js

4.3.2 title. Js

4.3.3 main. Js

4.4 ES6 modules Load common.js

4.4.1 index. Js

4.4.2 title. Js

4.4.3 main. Js

5. Asynchronous loading

5.1 webpack. Config. Js

5.2 the SRC \ index. Js

5.3 hello. Js

5.4 dist \ main js

5.5 hello. Main. Js

Related Posts

JavaScript learning data structure ES6-WeakSet

TypeScript base types

[🧪 Front End Lab] Front End Data Visualization Briefing – 02 – Topic research