簡單入門 · 前端工程化指南

[TOC] ## 前言 webpack作為當下最流行的前端打包工具，如果你對它還一無所知，那就可能找不到一份好的工作？其實我們學習或者不學習不僅僅因為某個公司是否在用這個框架，更要因為使用這個框架具有什么特點，能幫我們解決什么問題，會帶來其他什么問題，使用成本如何，難度如何，可拓展性如何。 ## 使用場景在前端生態日益完善的今天，各種針對前端工程化提出的解決方案層出不窮，這些方案一般都能大幅度的提高或者改善我們的開發過程，但是卻可能不能直接用于生產環境使用，這些方案可能有： * js模塊化，針對工具性質的、ui性質的組件模塊化開發 * es6或者typescript語言編寫的程序 * 樣式預處理器比如less sass編寫的樣式 * html模板引擎比如jade等綜上：這些開發階段使用的技術產物不能直接用于生產環境部署使用，我們手動去操作這些又過于繁瑣，所以提出來webpack這一個工具，可以實現將一切資源進行配置化打包的思想，來簡化我們的工作。 ## 是什么，與其他工具什么區別 * 概念理解 WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用。換句話說，它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。 * 圖解webpack以及與其他框架的對比 ![圖解各個工具](http://pic4.zhimg.com/v2-ae9253e557d902369b1beaed998061cb_b.jpg) * 表格說明 | 名稱 | 類型 | 特點描述 | | --- | --- | --- | | grunt | 前端流程工具 | 基于配置，較繁瑣，需要不斷的修改配置文件，入手難度大 | | gulp | 前端流程工具| 基于管道，基于stream，非常快，更加便利，可以靈活的把若干插件配置到管道任務中 | | browserify | 預編譯模塊化方案 | | | seajs/requirejs | 在線模塊化方案 | 通過引入，在線把你的文件進行模塊化，不同的只是兩個的模塊規范不同 | | webpack | 預編譯模塊化方案 | 更加智能化， | * 工作流程區別 ![](https://box.kancloud.cn/e192ecba0ea28f9a7c938a6660954103_1240x446.png) ![](https://box.kancloud.cn/5594f7e3f87162c57ef4de06b22f5c9b_1240x543.png) * [與其他工具的區別](https://survivejs.com/webpack/appendices/comparison/)（如果你外語水平有限，建議chrome打開，然后右鍵翻譯為中文） * 優點 > **代碼拆分** Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點，形成一個新的快。在優化了依賴樹后，每一個異步區塊都作為一個文件被打包。 **Loader** Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉換器可以將各種類型的資源轉換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。 **智能解析** Webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時候，允許使用動態表達式 require("./templates/" + name + ".jade")。 **插件系統** Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基于這個插件系統運行的，還可以開發和使用開源的 Webpack 插件，來滿足各式各樣的需求。 **快速運行** Webpack 使用異步 I/O 和多級緩存提高運行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。 ## 能解決什么問題 webpack簡單點來說就就是一個配置文件，所有的魔力都是在這一個文件中發生的。這個配置文件主要分為三大塊: > entry 入口文件讓webpack用哪個文件作為項目的入口,所有的項目主要通用依賴通過這個文件作為入口，其他跳轉的頁面依賴的資源在單獨的組件中去加載。 > output 出口讓webpack把處理完成的文件放在哪里 >module 模塊要用什么不同的模塊來處理各種類型的文件 ## 如何使用 ### 準備工作 * 安裝webpack ~~~ //全局安裝 npm install -g webpack //安裝到你的項目目錄 npm install --save-dev webpack ~~~ * 項目初始化 ~~~ //填寫基本的項目信息，會生成一個package.json的文件,如果有這個文件忽略 cnpm init // webpack安裝到包依賴之中，可以安裝穩定版本的，webpack@1.12.x npm install --save-dev webpack ~~~ * 項目結構建立兩個文件夾，app以及public,app文件夾用來存放原始數據和我們將寫的JavaScript模塊，public文件夾用來存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來我們再創建三個文件:index.html --放在public文件夾中;module.js-- 放在app文件夾中;main.js-- 放在app文件夾中; 此時的項目結構如圖所示： ![](https://box.kancloud.cn/5d78720f959ec64b84a7dffc0dfbe57f_386x187.png) * 初始化一些文件內容 1.我們在index.html文件中寫入最基礎的html代碼，它在這里目的在于引入打包后的js文件（這里我們先把之后打包后的js文件命名為bundle.js，之后我們還會詳細講述）。 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack demo文件</title> </head> <body> <div id='app'> </div> <script src="bundle.js"></script> </body> </html> ~~~ 2.在module.js中定義一個返回包含問候信息的html元素的函數,并依據CommonJS規范導出這個函數為一個模塊：語法中我們可以充分利用es6的常量，模塊，模板字符串，解構等語法，非常方便。(創建文件可以用`pico filename`) ~~~javascript // module.js const HELLO="Hello word!"; var hello= function(name) { var greet = document.createElement('h1'); greet.textContent =`HELLO${HELLO}`; return greet; } module.exports = { hello } ~~~ 3.main.js文件中我們寫入下述代碼，用以把module模塊返回的節點插入頁面。 ~~~ const {hello}=require("./module"); document.querySelector("#app").appendChild(hello('zhangsan')); ~~~ * 終端使用webpack模塊備注：無論哪種環境中，文件路徑是必備的常識，如果你不太清楚絕對路徑，相對路徑，根路徑請參考我另外一篇技術文檔，點擊跳轉。 ~~~ # {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑， # {destination for bundled file}處填寫打包文件的存放路徑 # 填寫路徑的時候不用添加{},建議在項目根目錄下的文件地址最前面不用加任何路徑 webpack {entry file} {destination for bundled file} webpack 'app/main.js' 'public/bundle.js' ~~~ 編譯成功后查看頁面，已經生效并打包到了對應文件中。從這個結果中可以看到，webpack只能適用于將某些資源打包為一個模塊，用于一個頁面中，如果你想批量操作打包或者引入文件，還是需要gulp輔助。(在打包成功的報文中，我們可以看到，Webpack 會分析入口文件，解析包含依賴關系的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。在頁面啟動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。) ![](https://box.kancloud.cn/fa82150ffb73813530ff6a77354b0627_1000x250.png) ![](https://box.kancloud.cn/3fd8002d1df423cc7c2e240d1e89946d_421x112.png) * 使用配置文件進行打包雖然可以使用終端工具以及對應的模塊可以進行很多操作，但為了方便管理，我們還是把這部分操作放在了文件中，比如loader，plugin等。在當前練習文件夾的根目錄下新建一個名為webpack.config.js的文件，我們在其中寫入如下所示的簡單配置代碼，目前的配置主要涉及到的內容是入口文件路徑和打包后文件的存放路徑。 ~~~ //注：“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。 module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/public",//打包后的文件存放的地方 filename: "bundle.js"//打包后輸出文件的文件名 } } ~~~ 有了這個配置之后，再打包文件，只需在終端里運行webpack命令就可以了，這條命令會自動引用webpack.config.js文件中的配置選項，省略了若干的參數。進一步簡化：你可以通過修改package.json文件中的scripts來把一些常用命令放到npm命令中，比如寫入`"start":"webpack"`就可以通過npm start就實現webpack打包。 * 拓展閱讀 scripts屬性可以自定義很多你想要的任務，其中start是比較特殊的，定義之后直接運行npm start，其他的則需要通過`npm run task`,如果你不清楚有哪些可執行命令，可以通過`npm run` 得到所有的可執行命令列表： ![](https://box.kancloud.cn/cc0b4801c639bdf3c8fd002c13ca031b_436x99.png) ### 正式使用強大功能 #### 生成Source Maps（使調試更容易）通過簡單的配置，webpack就可以在打包時為我們生成的source maps，這為我們提供了一種對應編譯文件和源文件的方法，使得編譯后的代碼可讀性更高，也更容易調試。在webpack的配置文件中配置source maps，需要配置devtool，它有以下四種不同的配置選項，各具優缺點，描述如下： | devtool選項 | 配置結果 | | --- | --- | | source-map | 在一個單獨的文件中產生一個完整且功能完全的文件。這個文件具有最好的<code>source map</code>，但是它會減慢打包速度 | | cheap-module-source-map | 在一個單獨的文件中生成一個不帶列映射的<code>map</code>，不帶列映射提高了打包速度，但是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試造成不便； | | eval-source-map | 使用<code>eval</code>打包源文件模塊，在同一個文件中生成干凈的完整的<code>source map</code>。這個選項可以在不影響構建速度的前提下生成完整的<code>sourcemap</code>，但是對打包后輸出的JS文件的執行具有性能和安全的隱患。在開發階段這是一個非常好的選項，在生產階段則一定不要啟用這個選項； | | cheap-module-eval-source-map |這是在打包文件時最快的生成<code>source map</code>的方法，生成的<code>Source Map</code> 會和打包后的<code>JavaScript</code>文件同行顯示，沒有列映射，和<code>eval-source-map</code>選項具有相似的缺點； | > 以上文件從上到下，打包越來越快，中小項目我們一般使用eval-source-map，大型項目為了降低成本，我們可以使用cheap-module-eval-source-map。對應的配置寫法：`devtool: 'eval-source-map',`加了這個配置之后就可以看到你開發的源文件，找到其代碼，不加的話是看不到原開發代碼文件，只有壓縮文件顯示的。 > `module.exports = { devtool: 'eval-source-map'}` ![](https://box.kancloud.cn/59f5a4d5e1fdb8e219df787d76da4b8d_709x320.png) #### 使用webpack作為本地服務器 * 基本使用瀏覽器監聽你的代碼的修改，并自動刷新顯示修改后的結果，使用并配置webpack-dev-server即可。需要將它加入到項目依賴。點擊查看[官網配置說明](https://webpack.js.org/configuration/dev-server/)。這里只說明比較重要的幾個配置，port：8080，訪問端口，默認為8080，如果你同時開發兩個應用，端口要修改其中一個。 ~~~ // 終端安裝模塊 cnpm i webpack-dev-server //webpack中配置dev-server devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true//實時刷新 } //package.json中配置啟動腳本 "server":"webpack-dev-server --open" // 啟動服務器 cnpm run server ~~~ * 可能遇到的問題： 1.開啟錯誤提示地址解析錯誤`getaddrinfo ENOTFOUND localhost`。解決辦法：設置host文件`127.0.0.1 localhost`的映射 2.如果你不想每次啟動都打開一個窗口，設置：`open:false`，否則設置true則默認打開 3.希望時時更新展示 inline:true ,那么更新內容后會時時更新頁面部分得到打包后的結果 #### 使用babel轉化 babel的用途：可以使用最新的js語言版本；可以支持js拓展之后的語言比如jsx。（潛在的原因是因為瀏覽器不支持部分es6的語法，需要通過babel把它轉化為es5，如果不用原來的es6語法就會保留，舊版瀏覽器不支持就會出現報錯）。babel具有非常多的配置選項，在單一的webpack.config.js文件中進行配置往往使得這個文件顯得太復雜，因此一些開發者支持把babel的配置選項放在一個單獨的名為 ".babelrc" 的配置文件中 ~~~ // npm一次性安裝多個依賴模塊，模塊之間用空格隔開 npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react // 配置babel的解析器其中 resolve是解析路徑的 function resolve (dir) { return path.join(__dirname, '..', dir) } module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader", }, include:[resolve('app'), resolve('test')]， exclude: /node_modules/ } ] } //.babelrc { "presets": ["react", "es2015"] } ~~~ * 注意事項每一項后綴名的文件都需要追加其對應的loader,否則就會提示你需要正確的loader加載它，導致打包失敗。所以對于文件中有多少文件類型需要追加loader都需要詳細區分。 `error:You may need an appropriate loader to handle this file type`. ## 參考入門項目 * [webpack-demo項目](https://github.com/robinson90/webpack-demo.git) ## 建議目前三大框架都有基于webpack做的較好的腳手架，如果自己不是特別想鉆研或者浪費時間的話，建議直接基于腳手架開發自己的項目，如果對應的配置環境不夠，自己根據prod的部分額外增加幾個配置即可。 - [create-react-app](https://github.com/facebook/create-react-app) - [vue-cli](https://github.com/vuejs/vue-cli/) - [angular-cli](https://github.com/angular/angular-cli) ## 參考文檔 * [github官網地址](https://github.com/webpack/webpack) * [webpack2.0中文文檔](http://www.css88.com/doc/webpack2/guides/development/) * [webpack入門--張旺--推薦閱讀](http://www.jianshu.com/p/42e11515c10f) * [webpack入門到工程化實踐--張旺](http://mp.weixin.qq.com/s/5v7x8tzZzTmB8v5ComfiSA) * [webpack入門教程（菜鳥教程）](http://www.runoob.com/w3cnote/webpack-tutorial.html) * [webpack是什么？（http://www.css88.com）](http://www.css88.com/archives/6992#more-6992) * [webpack知乎傻瓜指南](https://zhuanlan.zhihu.com/p/20367175) * [極客學院webpack教程](http://wiki.jikexueyuan.com/project/webpack-handbook/) * [webpack3系列教程](https://www.rails365.net/groups/webpack) * 掘金小冊 webpack教程 * [從入門到工程實踐](https://mp.weixin.qq.com/s/5v7x8tzZzTmB8v5ComfiSA)