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

时间 2020-01-16

标签关于 webpack 配置一些注释繁體版

原文原文链接

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

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

配置的意思

entry

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

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

output

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

module

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

resolve

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

plugins

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

怎样使用静态资源

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

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-placeholdersruby-on-rails

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

总结

整体上 Webpack 作的, 就是从 entry 引入文件, 经过 loaders 编译, 从 output 输出
而后其余功能由 plugins 写的其余的方法引入, 进行分包, Hashing 等等