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
