webpack 学习笔记

Chapter 1

• webpack 默认配置⽂文件:webpack.config.js
• 能够经过 webpack --config 指定配置⽂文件

• 经过 npm script 运⾏行行 webpack,package.json里的script下配置。

---

Chapter 2

• entry:打包的入口文件
• output:如何将编译后的文件输出到磁盘
• 
• Loaders: 支持其它文件类型而且把它们转化成有效的模块，而且能够添加到依赖图中

• 

  • • babel-loader 解析ES6
  • style-loader,css-loader,less-loader 解析css
  • file-loader 解析图片或字体
  • url-loader 解析图片，可带limit参数转换成base64
• Plugins: 用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入,做⽤用于整个构建过程.
• 
• Mode: 构建环境是:production、development 仍是 none
• 
• 文件监听：webpack --watch.build编译好的文件会自动更新。

• 热更新：webpack-dev-server(WDS)

• 热更新：第一次打开（1-2-A-B），更改文件热更新（1-2-3-4）

• 文件指纹：

  • hash 字体和图片
  • Chunkhash:js(和 webpack 打包的 chunk 有关，不不同的 entry 会⽣生成不不同的 chunkhash 值)
  • contenthash:css

• 代码压缩：

  • js:内置unglify-webpack-plugin
  • css:optimize-css-assets-webpack-plugin和cssnano.因为是单独生成css，须要删除style-loader(这个是用来生成css插入header标签的)
  • html:html-webpack-plugin

---

Chapter 3

• 自动清理构建目录：使用clean-webpack-plugin
• 自动补齐CSS3前缀：PostCSS 插件 autoprefixer
• CSS3的px和rem转换：使用 px2rem-loader，自动计算根元素font-size:lib-flexible

• html,js资源内联：

  • 例如 ${require('raw-loader!babel-loader!../node_modules/lib-flexible')}
• css资源内联：
• 
• 多页面打包：
• 
• source map:构建完成时，是否能够经过map调试源码，而非打包后的代码。配置devtool:'source-map'

• 分离公共资源：

  • 基础库分离：使用html-webpack- externals-plugin用cdn方式替换
  • 公共脚本分离：使用SplitChunksPlugin(webpack 4内置，替代CommonsChunkPlugin),也能够分离基础库cdn
• tree shaking:ES6语法（import ...)静态分析，没有被用到的代码，不打包。
• scope hoisting：使用ES6语法，减小webpack打包产生的闭包。
• JS懒加载：使用插件 npm install @babel/plugin-syntax-dynamic-import --save-dev
• ESLint：发现代码错误，保证团队风格
• 

• webpack打包库和组件：

  • 支持 AMD/CJS/ESM 模块引⼊
  • 
  • library: 指定库的全局变量量
  • libraryTarget: 支持库引入的⽅式
  • 
  • 
  • npm publish 打包上传。
• ssr服务端渲染：服务端生成html模板,css，data数据，直接返回客户端。减小请求次数，提高seo.
• 优化日志：stats:errors-only + friendly-errors-webpack-plugin插件

• 错误日期的捕获和中断：

  • echo $? 查看错误码
  • webpack4 和 3 写法不同
  • 
• • *

Chapter 4

• 构建配置抽离成 npm 包

  • 
  • 经过 webpack-merge 组合配置
• 冒烟测试：测试打包后是否构建报错，测试是否有html，css，js文件输出。
• 单元测试：mocha + chai（断言库）
• 测试覆盖率：istanbul
• 持续集成ci：Travis
• git commit 规范：规范git commit提交信息，自动生成change-log.
• 
• 

• 版本号规范：

  • X.Y.Z
  • alpha,beta,rc

---

Chapter 5

• package.json 中使用 stats
• 速度分析： speed-measure-webpack-plugin
• 体积分析： webpack-bundle-analyzer
• 使用高版本：node和webpack
• 多进程多线程：webpack4原生:thread-loader
• 并行压缩： terser-webpack-plugin 开启 parallel 参数
• 分包：分离基础库：html-webpack-externals- plugin
• 进一步分包：预编译资源模块： 使用 DLLPlugin 进行分包，DllReferencePlugin 对 manifest.json 引用

• 使用缓存构建：

  • babel-loader 开启缓存
  • terser-webpack-plugin 开启缓存
  • 使用 cache-loader 或者 hard-source-webpack-plugin
• 缩小构建目标：好比 babel-loader 不解析 node_modules
• 减小文件搜索范围

• 图片压缩：imagemin
• tree shaking:去除没有用到的js和css
• 动态polyfill: 识别 User Agent，下发不一样的 Polyfill
•