關於簡聊 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 等等