Webpack 入門學習

來源:互聯網
上載者:User

標籤:具體步驟   out   缺點   提高   auth   頁面   答案   情況   高項   

1.什麼是Webpack?

Webpack可以看做是模組打包機:它做的事情是,分析你的項目結構,找到JavaScript模組以及其它的一些瀏覽器不能直接啟動並執行拓展語言(Scss,TypeScript等),並將其打包為合適的格式以供瀏覽器使用。

2.WebPack和Grunt以及Gulp相比有什麼特性?

其實WebPack和另外兩個並沒有太多的可比性,Gulp/Grunt是一種能夠最佳化前端的開發流程的工具,而WebPack是一種模組化的解決方案,不過WebPack的優點使得WebPack可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是:在一個設定檔中,指明對某些檔案進行類似編譯,組合,壓縮等任務的具體步驟,這個工具之後可以自動替你完成這些任務。

 

 

Grunt和Gulp的工作流程

Webpack的工作方式是:把你的項目當做一個整體,通過一個給定的主檔案(如:index.js),Webpack將從這個檔案開始找到你的項目的所有依賴檔案,使用loaders處理它們,最後打包為一個瀏覽器可識別的JavaScript檔案。


  開始使用WebPack初步瞭解了WebPack工作方式後,我們一步步的開始學習使用WebPack。安裝Webpack可以使用npm安裝,建立一個空的練習檔案夾(此處命名為Webpack sample pro),在終端中轉到該檔案夾後執行下述指令就可以完成安裝。
//全域安裝npm install -g webpack//安裝到你的項目目錄npm install --save-dev webpack 
正式使用Webpack前的準備1.在上述練習檔案夾 中建立一個package.json檔案,這是一個標準的npm說明檔案,裡面蘊含了豐富的資訊,包括當前項目的相依模組,自訂的指令碼任務等等。在終端中使用npm init命令可以自動建立 這個package.json檔案
npm init

輸入這個命令後,終端會問你一系列諸如項目名稱,項目描述,作者等資訊,不過不用擔心,如果你不準備在npm中發布你的模組,這些問題的答案都不重要,斷行符號預設即可。

1.package.json檔案已經就緒,我們在本項目中安裝Webpack作為依賴包

//安裝 Webpacknpm  install --save-dev webpack

2.回到之前的空檔案夾,並在裡面建立兩個檔案夾,app檔案夾和public檔案夾,app檔案夾用來存放未經處理資料和我們將寫的javaScript模組,public檔案夾用來存放準備給瀏覽器讀取的資料(包括使用webpack產生的打包後的js檔案以及一個index.html檔案)。在這裡 還需要建立三個檔案,.index.html檔案放在public檔案夾中,兩個js檔案(Greeter.js和main.js)放在app檔案夾中,此時項目結構 如所示 

index.html檔案只有最基礎的html代碼,它唯一的目的就是載入打包後的js檔案(bundle.js)

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>Webpack Sample Project</title>  </head>  <body>    <div id=‘root‘>    </div>    <script src="bundle.js"></script>  </body></html>

 Greeter.js只包括一個用來返回包含問候資訊的html元素的函數。

// Greeter.jsmodule.exports = function() {  var greet = document.createElement(‘div‘);  greet.textContent = "Hi there and greetings!";  return greet;};

main.js用來把Greeter模組返回的節點插入頁面。

//main.js var greeter = require(‘./Greeter.js‘);document.getElementById(‘root‘).appendChild(greeter());
正式使用Webpack

webpack可以在終端中使用,其最基礎的命令是

webpack {entry file/入口檔案} {destination for bundled file/存放bundle.js的地方}

只需要指定一個入口檔案,webpack將自動識別項目所依賴的其它檔案,不過需要注意的是如果你的webpack沒有進行全域安裝,那麼當你在終端中使用此命令時,需要額外指定其在node_modules中的地址,繼續上面的例子,在終端中屬於如下命令

//webpack非全域安裝的情況node_modules/.bin/webpack app/main.js public/bundle.js

結果如下


termialResult1


可以看出webpack同時編譯了main.js 和Greeter,js,現在開啟index.html,可以看到如下結果


htmlResult1


有沒有很激動,已經成功的使用Webpack打包了一個檔案了。不過如果在終端中進行複雜的操作,還是不太方便且容易出錯的,接下來看看Webpack的另一種使用方法。

通過設定檔來使用Webpack

Webpack擁有很多其它的比較進階的功能(比如說本文後面會介紹的loaders和plugins),這些功能其實都可以通過命令列模式實現,但是正如已經提到的,這樣不太方便且容易出錯的,一個更好的辦法是定義一個設定檔,這個設定檔其實也是一個簡單的JavaScript模組,可以把所有的與構建相關的資訊放在裡面。

還是繼續上面的例子來說明如何寫這個設定檔,在當前練習檔案夾的根目錄下建立一個名為webpack.config.js的檔案,並在其中進行最最簡單的配置,如下所示,它包含入口檔案路徑和存放打包後檔案的地方的路徑。

module.exports = {  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口檔案  output: {    path: __dirname + "/public",//打包後的檔案存放的地方    filename: "bundle.js"//打包後輸出檔案的檔案名稱  }}

:“__dirname”是node.js中的一個全域變數,它指向當前執行指令碼所在的目錄。

現在如果你需要打包檔案只需要在終端裡你運行webpack(非全域安裝需使用node_modules/.bin/webpack)命令就可以了,這條命令會自動參考webpack.config.js檔案中的配置選項打包你的項目,輸出結果如下


webpack


又學會了一種使用Webpack的方法,而且不用管那煩人的命令列參數了,有沒有感覺很爽。有沒有想過如果可以連webpack(非全域安裝需使用node_modules/.bin/webpack)這條命令都可以不用,那種感覺會不會更爽~,繼續看下文。

更快捷的執行打包任務

執行類似於node_modules/.bin/webpack這樣的命令其實是比較煩人且容易出錯的,不過值得慶幸的是npm可以引導任務執行,對其進行配置後可以使用簡單的npm start命令來代替這些繁瑣的命令。在package.json中對npm的指令碼部分進行相關設定即可,設定方法如下。

{  "name": "webpack-sample-project",  "version": "1.0.0",  "description": "Sample webpack project",  "scripts": {    "start": "webpack" //配置的地方就是這裡啦,相當於把npm的start命令指向webpack命令  },  "author": "zhang",  "license": "ISC",  "devDependencies": {    "webpack": "^1.12.9"  }}

註:package.json中的指令碼部分已經預設在命令前添加了node_modules/.bin路徑,所以無論是全域還是局部安裝的Webpack,你都不需要寫前面那指明詳細的路徑了。

npm的start是一個特殊的指令碼名稱,它的特殊性表現在,在命令列中使用npm start就可以執行相關命令,如果對應的此指令碼名稱不是start,想要在命令列中運行時,需要這樣用npm run {script name}npm run build,以下是執行npm start後命令列的輸出顯示


npmStartTermialResult

現在只需要使用npm start就可以打包檔案了,有沒有覺得webpack也不過如此嘛,不過不要太小瞧Webpack,其強大的功能包含在其一系列可供配置的選項中,我們一項項來看。

Webpack的強大功能產生Source Maps(使調試更容易)

開發總是離不開調試,如果可以更加方便的調試當然就能提高開發效率,不過打包後的檔案有時候你是不容易找到出錯了的地方對應的原始碼的位置的,Source Maps就是來幫我們解決這個問題的。
通過簡單的配置後,Webpack在打包時可以為我們產生的source maps,這為我們提供了一種對應編譯檔案和源檔案的方法,使得編譯後的代碼可讀性更高,也更容易調試。

在webpack的設定檔中配置source maps,需要配置devtool,它有以下四種不同的配置選項,各具優缺點,描述如下:

devtool選項 配置結果
source-map 在一個單獨的檔案中產生一個完整且功能完全的檔案。這個檔案具有最好的source map,但是它會減慢打包檔案的構建速度;
cheap-module-source-map 在一個單獨的檔案中產生一個不帶列映射的map,不帶列映射提高項目構建速度,但是也使得瀏覽器開發人員工具只能對應到具體的行,不能對應到具體的列(符號),會對調試造成不便;
eval-source-map 使用eval打封裝來源檔案模組,在同一個檔案中產生乾淨的完整的source map。這個選項可以在不影響構建速度的前提下產生完整的sourcemap,但是對打包後輸出的JS檔案的執行具有效能和安全的隱患。不過在開發階段這是一個非常好的選項,但是在生產階段一定不要用這個選項;
cheap-module-eval-source-map 這是在打包檔案時最快的產生source map的方法,產生的Source Map 會和打包後的JavaScript檔案同行顯示,沒有列映射,和eval-source-map選項具有相似的缺點;

正如上表所述,上述選項由上到下打包速度越來越快,不過同時也具有越來越多的負面作用,較快的構建速度的後果就是對打包後的檔案的的執行有一定影響。

在學習階段以及在小到中性的項目上,eval-source-map是一個很好的選項,不過記得只在開發階段使用它,繼續上面的例子,進行如下配置

module.exports = {  devtool: ‘eval-source-map‘,//配置產生Source Maps,選擇合適的選項  entry:  __dirname + "/app/main.js",  output: {    path: __dirname + "/public",    filename: "bundle.js"  }}

cheap-module-eval-source-map方法構建速度更快,但是不利於調試,推薦在大型項目考慮da時間成本是使用。



本文參考:
連結:http://www.jianshu.com/p/42e11515c10f
來源:簡書

 

 

 

Webpack 入門學習

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.