webpack实践

目的在于增强打包效率，提高团队工作效率。这篇文章主要应用于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）详解