研究了 Webpack 一段時間,決定將 Webpack 從 React 獨立出來啦!
自己則是在實務上剛好遇到 CSS 檔內有使用 url() ,結果 Webpack 就會說他不知道怎麼處理這些 jpg 、 png 、 ttf 等等,像這樣:

Not a winner, not a loser.
研究了 Webpack 一段時間,決定將 Webpack 從 React 獨立出來啦!
自己則是在實務上剛好遇到 CSS 檔內有使用 url() ,結果 Webpack 就會說他不知道怎麼處理這些 jpg 、 png 、 ttf 等等,像這樣:

上一篇介紹了 Webpack的基本設定,本篇要繼續帶各位看一些更進階的應用!
這次的主題是最近很紅的「Webpack」, Webpack 是一個擴充性極佳的打包工具,最基本的功能就是幫我們的程式碼打包成一個或多個檔案,而且我們還可以安裝 Loader ,例如: Babel 可以幫我們轉譯 ES6 成 ES5,而我們前一篇文章說的 JSX ,瀏覽器當然也是完全看不懂,我們還是要經過 Babel 轉譯,將 JSX 翻譯成 JavaScript ,瀏覽器才會看得懂我們在寫什麼。
如果只是轉譯檔案還沒什麼,一個指令幫我把轉譯好所有檔案才是 Webpack 最有價值的地方,而更厲害的是,我們還可以為 Webpack 安裝額外插件, Minify 、 Uglify 、 Source Map 等等都可以靠插件來幫我們一次完成,唯一可惜的是 Webpack 的設定相比其他 Task Runner 來說複雜不少,學習曲線有點高,希望這篇新手教新手的文章能給各位一點方向!