关于简聊 Webpack 配置的一些注释

不知道(公司里)觉得不好懂的有多少人, 这边我统一加上一些解释,
具体的文档可以到官方文档或者 SegmentFault 上搜索. 这里只涉及两个方面:

• 目前简聊里的配置每一个部分对应什么意思
• 打包后在 Gulp, Sneaky, HTML 当中怎么引用资源

配置的意思

• entry

entry 当中是 js 文件引用的入口, 一般每个 entry 的属性对应一个文件
比如 main 这个属性, 内容是数组, 代表这个文件打包后引用哪些文件
一般 vendor 这个 entry 对应第三方模块
另外有一些 webpack 开头的文件, 属于调试使用的

这篇文章很重要, 简聊很多是照着这边做的:
http://kevinold.com/2015/02/04/configure-webpack-dev-server-and-react-...

• output

生成的文件怎样访问的问题, 主要 path 和 filename 两个属性
path 可能对应文件路径, 也可能是从 url 访问的情况下的路径
filename 用来配置生成的文件名, 比如 [hash] 用于生成 Hash, 看文档
http://webpack.github.io/docs/configuration.html#output-filename
另外 publicPath 我们也用, 在 path 属性之前的, 比如调试或者 CDN 之类的域名

• module

module 当中主要配置 loaders, 需要看对应的各种 loader 的 README 才行
简聊也用了 noParse, 声明这个模块不需要 parse 查找依赖, 这是未来性能做的

• resolve

这个属性里主要设置 extensions, 也就是文件后缀名
查找依赖的时候的会以此查找这里设置的几个文件名来查找文件

• plugins

查看具体插件的意思, 前面的配置都是关于怎么: 查找文件, 编译文件, 导出文件
其他一些功能, 就需要 plugins 来做了, 比如编译, 导出 Hash 的表, 导出 CSS 等等

怎样使用静态资源

Webpack 由两种模式, 或者说两个命令来提供静态资源:

• webpack, 编译命令, 静态资源打包, 生成到 output 属性配置的位置, 结果是文件
• webpack-dev-server, 打包, 但是结果是以 HTTP 服务器的方式访问的

所以简聊在开发时, 开发环境跟编译结果是用不同的 HTML 来访问静态资源的
一般 output.path 都是 build, 这个 build 就会出现在两边的路径当中
具体看简聊的配置, 总之都是逐个环境写出来的

静态资源 Hashing 是自带的功能, 通过 filename 属性的 [hash] 或者 [chunkhash] 启用
引用以后生成在 path 对应路径的文件名当中就带好了 Hash
实际上 Hash 是有一些配置选项的, 可以看文档写的:
https://github.com/webpack/file-loader#filename-template-placeholders

Hash 的内容是打包结束, 通过一个 plugin 抓去出来的, 变成一个 JSON 文件
所以最后项目上线的时候, Gulp 或者 Express 就需要去读这个文件生成 HTML
目前简聊当中两种办法都已经用了.. 取决于 HTML 是什么渲染的

总结

总体上 Webpack 做的, 就是从 entry 引入文件, 通过 loaders 编译, 从 output 输出
然后其他功能由 plugins 写的其他的方法引入, 进行分包, Hashing 等等