webpack

有时候部分页面内容是通过富文本实现，维护这个富文本也需要工程化的支持，方便解决兼容和开发规范性问题。 想法 利用webpack打包工具和插件，把html js css 合并成一个大html 方案

1.定义 通过链式调用操作webpack 配置对象。(chain：链子) 2.包含的对象ChainedMap和ChainSet ChainedMap ChainSet 3.常用方法 toString(

1.基础配置 1.1 library命名 如果我们打包的⽬的是⽣成⼀个供别⼈使⽤的库，那么可以使⽤ output.library 来指定库的名称，库 的名称⽀持占位符和普通字符串： 1.2 libra

1. MiniCssExtractPlugin 样式抽离 使用 MiniCssExtractPlugin 抽离出 css 文件，以 link 标签的形式引入样式文件 2. 不同环境不同config 配

1.分析 整个函数里就声明了一个变量installedModules 和函数__webpack_require__，并在函数上添加了一个m,c,p属性，m属性保存的是传入的模块数组，c属性保存的是in

1.plugin自定义 webpack在编译代码过程中 ⽣命周期概念 对应不同的打包阶段 不同打包阶段 module Assets plugin本质上是⼀个类 它是如何注册到webpack的对应阶段的

1.热更新概念 启动WebpackDevServer是整页刷新，这里讨论的是 局部块更新。原有的变化信息保留 Hot Module Replacement(HMR: 热模块替换) 2.css模块HMR

1.实现逻辑 把上面静态的entry 和 plugins里的htmlWebpackPlugin对象数组，调整为动态读取。 glob遍历文件夹关系，得出文件夹列表对象entryFiles 遍历entry

1.定义loader loader就是一个函数 ，不可以是箭头函数,需要用到this做操作 必须有返回值 配置设置 loader高级应用 this.query 接受参数 loader 的 api 都挂

基础搭建 修改源文件 样式处理 集成css样式处理： css-loader style-loader 安装 npm install style-loader css-loader -D 配置 sass

1.定义 webpack是一个js的静态模块打包器module bundler。 从入口模块出发，递归查找所有文件的依赖，并入口和所有依赖打包成一个文件中。 是工程化自动化思想的体现。 2.安装 局部