【前端必会】HtmlWebpackPlugin 和 SplitChunksPlugin 是什么?

背景

了解什么是webpack插件,在来看一下不能不知道的两个插件

  1. HtmlWebpackPlugin 有了这个插件,webpack执行后会自动帮我们在dist目录生成一个html文件,并且添加bundle.js的引用。
    https://webpack.docschina.org/plugins/html-webpack-plugin
  2. SplitChunksPlugin 这个插件可以协助我们在生成的bundle上进行更为精确的配置,比如node_modules下的模块单独打包到一个文件(方便缓存)等

开始

写2个按钮,点击分别加载页面1,页面2

//index.html
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>Webpack App</title>
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 </head>
 <body>
 <h1>Hello webpack splitchunks</h1>
 <button id="btn1">页面1</button>
 <button id="btn2">页面2</button>
 </body>
</html>
//入口脚本
window.addEventListener("load", function () {
 var btn1 = document.getElementById("btn1");
 btn1.addEventListener("click", function () {
 import("./p1");
 });
 var btn2 = document.getElementById("btn2");
 btn2.addEventListener("click", function () {
 import("./p2");
 });
});

两个页面

//页面1
import { max } from "lodash";
console.log("p1 lodash", max);
//页面2
import { max } from "lodash";
console.log("p2 lodash", max);
//webpack 配置
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const config = {
 context: path.resolve(__dirname),
 mode: "production",
 optimization: {
 minimize: false,
 },
 entry: "./main.js",
 target: ["web", "es5"],
 output: {
 clean: true,
 filename: "bundle.js",
 path: path.resolve(__dirname, "dist"),
 },
 plugins: [
 new HtmlWebpackPlugin({
 template: "index.html",
 }),
 ],
};
const compiler = webpack(config);
compiler.run((err, stats) => {
 console.log(err);
});

生成后的目录

//bundle.js 关键代码
var __webpack_exports__ = {};
console.log("hello");
window.addEventListener("load", function () {
 var btn1 = document.getElementById("btn1");
 btn1.addEventListener("click", function () {
 Promise.all(/* import() */[__webpack_require__.e(891), __webpack_require__.e(751)]).then(__webpack_require__.bind(__webpack_require__, 751));
 });
 var btn2 = document.getElementById("btn2");
 btn2.addEventListener("click", function () {
 Promise.all(/* import() */[__webpack_require__.e(891), __webpack_require__.e(291)]).then(__webpack_require__.bind(__webpack_require__, 291));
 });
});
//751.bundle.js 关键代码
"use strict";
(self["webpackChunk"] = self["webpackChunk"] || []).push([[751],{
/***/ 751:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(891);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);
console.log("p1 lodash", lodash__WEBPACK_IMPORTED_MODULE_0__.max);
/***/ })
}]);
//291.bundle.js 关键代码
"use strict";
(self["webpackChunk"] = self["webpackChunk"] || []).push([[291],{
/***/ 291:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(891);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);
console.log("p2 lodash", lodash__WEBPACK_IMPORTED_MODULE_0__.max);
/***/ })
}]);
//891.bundle.js 关键代码(lodash模块代码)
(self["webpackChunk"] = self["webpackChunk"] || []).push([[891],{
/***/ 891:
/***/ (function(module, exports, __webpack_require__) {
/* module decorator */ module = __webpack_require__.nmd(module);
var __WEBPACK_AMD_DEFINE_RESULT__;/**
 * @license
 * Lodash <https://lodash.com/>
 * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
 * Released under MIT license <https://lodash.com/license>
 * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
 * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
 */
;(function() {
 /** Used as a safe reference for `undefined` in pre-ES5 environments. */
 var undefined;
 /** Used as the semantic version number. */
 var VERSION = '4.17.21';
 /** Used as the size to enable large array optimizations. */
 var LARGE_ARRAY_SIZE = 200;
......

总结

  1. 使用了异步加载模块,自动生成2个bundle(751、251)。异步模块好像一定是会拆分为一个新的文件(不确定)
  2. 2个模块都引用了lodash,所以lodash又单独拆出一个bundle(891)
  3. 进入页面加载
  4. 点击按钮1
  5. 点击按钮2
  6. 多看文档、多看文档、多看文档
    https://webpack.docschina.org/plugins/split-chunks-plugin/
作者:李同学的教室原文地址:https://www.cnblogs.com/lee35/p/16729376.html

%s 个评论

要回复文章请先登录注册