目的在于增强打包效率，提高团队工作效率。这篇文章主要应用于C端用户项目。
todo list
- [ ] 理解并优化模板文件index.ejs
- [ ] 区分线上线下环境处理
- [ ] 抽取公共部分，及vendor
- [ ] 不断优化打包过程
- [ ] 引入打包可视化插件，对比优化效果，给出数据
1.webpack基本配置
- entry（字符串、数组、对象）
- output
- path
- filename
- [name] 使用入口名称
- [hash] 使用每次构建过程中，唯一的 hash 生成
- [chunkhash] 使用基于每个 chunk 内容的 hash，内容不变时hash值不会改变
- 不要在开发环境下使用[chunkhash]，因为这会增加编译时间。
- 将开发和生产模式的配置分开，
- 并在开发模式中使用[name].js的文件名，
- 在生产模式中使用[name].[chunkhash].js文件名。
- hotUpdateChunkFilename 自定义热更新 chunk 的文件名，默认值是："[id].[hash].hot-update.js"
- library
- 在编写一个导出值的 JavaScript library 时，可以使用library 和 libraryTarget，导出值可以作为其他代码的依赖。
- 如library: "MyLibrary"
- library 名称取决于 output.libraryTarget 选项的值。
- loader
- resolve
- alias 短路径引用
- extensions 自动解析确定的扩展。默认值为：[".js", ".json"]
- modules 告诉 webpack 解析模块时应该搜索的目录。
- 其中，使用绝对路径，将只在给定目录中搜索。
- unsafeCache
- 启用，会主动缓存模块，但并不安全。传递 true 将缓存一切。默认：true。
- 正则表达式，或正则表达式数组，可以用于匹配文件路径或只缓存某些模块。
- unsafeCache: /src/utilities/ 只缓存 utilities 模块
- resolveLoader
- 与resolve 对象的属性集合相同，但仅用于解析 webpack 的 loader 包。
- moduleExtensions 想要不带 -loader 后缀使用 loader，可以使用：['-loader']
2.webpack plugins
| 名字 | 用途 | 用法 |
|---|---|---|
| 计算机 | $1600 | 5 |
| 手机 | $12 | 12 |
| 管线 | $1 | 234 |
3.模板文件index.ejs
Meta http-equiv属性与HTTP头的Expires中（Cache-control）详解
网友评论