Webpack 入門學習

時間 2019-11-30

標籤 webpack 入門學習简体版

原文原文鏈接

1.什麼是Webpack?

Webpack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss,TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。css

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

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

Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，這個工具以後能夠自動替你完成這些任務。前端

Grunt和Gulp的工做流程

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。java

開始使用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中發佈你的模塊，這些問題的答案都不重要，回車默認便可。node

1.package.json文件已經就緒，咱們在本項目中安裝Webpack做爲依賴包webpack

//安裝 Webpack
npm  install --save-dev webpack

2.回到以前的空文件夾，並在裏面建立兩個文件夾，app文件夾和public文件夾，app文件夾用來存放原始數據和咱們將寫的javaScript模塊，public文件夾用來存放準備給瀏覽器讀取的數據（包括使用webpack生成的打包後的js文件以及一個index.html文件）。在這裏還須要建立三個文件，.index.html文件放在public文件夾中，兩個js文件（Greeter.js和main.js）放在app文件夾中，此時項目結構以下圖所示 web

index.html文件只有最基礎的html代碼，它惟一的目的就是加載打包後的js文件（bundle.js）npm

<!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元素的函數。json

// Greeter.js
module.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" } }