webpack学习

启动： npm scripts 运行 webpack 开发环境： npm run dev 生产环境： npm run build 通过 webpack 直接运行 webpack entry.js 怎么

HappyPack 已经不再维护，推荐使用 thread-loader HappyPack 已经不再维护，推荐使用 thread-loader

可以分析哪些问题： 依赖的第三方模块文件大小 业务里面的组件代码大小 npm run build 后自动 8888 端口展示。分析出来后可以处理一下。比如通过 cdn 引入等。

构建配置抽离成 npm 包： 意义： 通用性： 业务开发者无需关注构建配置 统一团队构建脚本 可维护性 构建配置合理的拆分 README 文档、ChangeLog 文档 质量 冒烟测试、单元测试、测试

判断构建是否成功 在 CI/CD 的 pipline 或者发布系统需要知道的当前构建状态 每次构建完成后输入 echo $? 获取错误码 捕获报错 通过错误码显示错误 主动捕获并处理构建错误 comp

展示一大堆日志，很多不需要开发者关注 统计信息 stats： 构建成功 展示一大堆日志，很多不需要开发者关注 统计信息 stats： 构建成功

服务端渲染： HTML + CSS +JS +Data => 渲染后的 HTML 服务端： 所有模板等资源都存储在服务器 内网机器拉取数据更快 一个 HTML 返回所有数据 浏览器和服务器交互流程 客

代码分割的意义 对于大的 web 应用来讲，将所有的代码都放在一个文件中是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack 有一个功能就是将你的代码库分割成 chunc

现象：构建后的代码存在大量闭包代码 1.体积增大 2.运行代码时创建的函数作用域变多，内存开销变大 结论： 1.被 webpack 转换后的模块会带上一层包裹 2.import 会被转换为 __web

eval: 使用 eval 包裹模块代码 source map：产生.map 文件 cheap：不包含列信息 inline：将 .map 作为 DataURI 嵌入，不单独生成 .map 文件 mou

原理：一个 entry 有一个 html-webpack-plugin 优化：动态获取 entry 和设置 html-webpack-plugin 数量，利用 glob.sync，动态获取 js 文件

postcss-loader autoprefixer 在某 less 文件中样式加 display: flex 配置 webpack.config.js 报错 处理 新建 postcss.confi

clean-webpack-plugin 构建时自动删除之前构建好的目录。 clean-webpack-plugin 构建时自动删除之前构建好的目录。

js 文件压缩 webpack 内置 uglifyjs-webpack-plugin css 文件压缩 安装 optimize-css-assets-webpack-plugin，同时安装 cssna

作用：版本管理 Hash:和整个项目的构建有关，只要项目文件有修改，整个项目构建的 hash 值就会更改 Chunkhash：和 webpack 打包的 chunck 有关，不同的 entry 会生成

file-loader url-loader 可以处理图片和字体，可以设置较小资源自动转换为 base64

css-loader 用于加载 .css 文件，并且转换成 commonjs 对象 style-loader 将样式通过 <style> 标签插入 head 中 less-loader 在上述配置中加

mode 用来指定当前的构建环境是： production|development|none 设置 mode 可以使用 webpack 内置的函数，默认值为 production

插件，用于 bundle 文件的优化，资源管理和环境变量注入作用于整个构建。插件，用于 bundle 文件的优化，资源管理和环境变量注入作用于整个构建。

webpack 开箱即用，只支持 js 和 json 两种文件类型，通过 Loaders 去支持其他文件类型并且把它们转化为有效的模块，并且可以添加到依赖图中。 本身是一个函数，接受源文件作为参数，返