背景

了解什么是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/

【前端必会】HtmlWebpackPlugin 和 SplitChunksPlugin 是什么？的更多相关文章

  1. [Linux] 一个前端必会的 Nginx 免费教程-在虚拟机中用deepin测试

    原文技术胖的 nginx 技术胖 专注于前端开发 deepin Linux Deepin 是一个基于 DEB 包管理的一个独立操作系统,和那些 Ubuntu(下个大版本是基于 debian 开发) 的 ...

  2. 前端必学内容：webpack3快速入门 1-23节内容参考

    前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...

  3. 2018 BAT最新《前端必考面试题》

    2018 BAT最新<前端必考面试题> 1.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1). 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文 ...

  4. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  5. 前端必学---JavaScript数据结构与算法---简介

    前端必学---JavaScript数据结构与算法---简介 1. 数据结构: 数据结构是相互之间存在一种或者多种特定关系的数据元素的集合.---<大话数据结构> 1.1 数据结构的分类 1 ...

  6. 前端必会html知识整理

    1.浏览器内核:         1.ie:trident(三叉戟)内核         2.firefox:gecko(壁虎)内核         3.safari:webkit(浏览器核心)内核 ...

  7. 2019js面试题前端必问点小视频

    其实市面上的面试题有很多,但是大部分都是总结的blog居多,有时候说明一个事物也许口述几分钟就可以搞定,但是看帖子可能要分析半天 所以我就出一部分前端js必考的小视频,不管我们什么时候面试基本都绕不过 ...

  8. 【前端必会】使用indexedDB，降低环境搭建成本

    背景 学习前端新框架.新技术.如果需要做一些数据库的操作来增加demo的体验(CURD流程可以让演示的体验根据丝滑) 最开始的时候一个演示程序我们会调用后台,这样其实有一点弊端,就是增加了开发和维护成 ...

  9. 前端必会的js知识总结整理

    1.晨曦. 2.js是一门什么样的语言及特点?         js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言.也是一种广泛用于web客户端开发的脚本语言,常用来给html网页添加动态 ...

随机推荐

  1. 驳"一切不谈考核的管理都是扯淡"

    一.引子 以我个人的从业经验认为,研发人员的量化考核,始终是一个世界难题.正巧不久前在园子里看到了"一切不谈考核的管理都是扯淡!"一文(下面简称为"扯淡"),该 ...

  2. 记一次react-hooks项目获取图表图片集合并生成pdf的需求

    需求: 获取子组件中所有图片的dom元素并生成图片,再把生成的图片转化为pdf下载 难点 众所周知,react是单向数据流,倡导f(data)⇒ UI的哲学, 并不建议过多直接操作dom,但是生成图片 ...

  3. Solution -「树状数组」 题目集合

    T1 冒泡排序 题目描述 clj 想起当年自己刚学冒泡排序时的经历,不禁思绪万千 当年,clj 的冒泡排序(伪)代码是这样的: flag=false while (not flag): flag=tr ...

  4. 递归概念&分类&注意事项和使用递归计算1-n之间的和

    递归 概述 递归:指在当前方法内调用自己的这种现象. 递归的分类: 递归分为两种,直接递归和间接递归 直接递归称为方法自身调用自己 简介递归可以A方法调用B方法,B方法调用C方法,C方法调用A方法 注 ...

  5. 20220724-Java的继承

    目录 含义 代码示例 使用方法和注意事项 个人理解 含义 继承Extends 面向对象最显著的一个特性,继承是从已有的类中派生出新的类,新的类能吸收已有类的性和方法,并能扩展新的能力. 代码示例 cl ...

  6. Docker部署kafka｜Go操作实践

    前言 写作本文的背景是由于字节的暑期青训营中,某个项目要求编写一个简易的流处理引擎(flink),开发语言不限,推荐Java,本着好奇心的驱使,我打算使用Go语言进行部分尝试. 既然是流处理引擎,那么 ...

  7. Java开发学习(二十二)----Spring事务属性、事务传播行为

    一.事务配置 上面这些属性都可以在@Transactional注解的参数上进行设置. readOnly:true只读事务,false读写事务,增删改要设为false,查询设为true. timeout ...

  8. 线程本地存储 ThreadLocal

    线程本地存储 · 语雀 (yuque.com) 线程本地存储提供了线程内存储变量的能力,这些变量是线程私有的. 线程本地存储一般用在跨类.跨方法的传递一些值. 线程本地存储也是解决特定场景下线程安全问 ...

  9. luoguP3224 [HNOI2012]永无乡【线段树，并查集】

    洞庭青草,近中秋,更无一点风色.玉鉴琼田三万顷,着我扁舟一叶.素月分辉,明河共影,表里俱澄澈.悠然心会,妙处难与君说. 应念岭表经年,孤光自照,肝胆皆冰雪.短发萧骚襟袖冷,稳泛沧溟空阔.尽挹西江,细斟 ...

  10. Spring 03: 基于xml的构造方法注入

    构造方法注入 具体有3种注入方式:通过构造方法的 a.参数名称注入 b.参数下标注入 c.默认参数顺序注入 参数名称注入 School实体类 package com.example.pojo03; p ...