webpack的學習(3) -------- webpack.config.js

2017-05-15 修改package.json圖片錯誤。

觀念：

在官方的說明文件裡webpack主要有四個概念～ Entry, Output, Loaders, Plugins

1.Entry:

Webpack會對我們開發應用專案(application)的相依檔案(dependencies)建立一個圖形結構（類似樹狀圖），而這個圖形結構會有起始點(root)這個起始點就所謂的進入點。

webpack 會從這個進入點的第一個檔案開始執行並且開始依循圖形往下找到其他的相依程式做打包的動作。

2.Output:

當webpack打包好你的程式後必須要告訴webpack要將打包好的程式放在哪邊？因此output這個屬性就是在告訴webpack要把包好的東西放在哪邊。

3.Loaders:

對於專案會用到的資料如：css, html, scss, jpg...等，webpack都會把他們當成一個模組(module)然而webpack其實只認得Javascript。Loader在webpack裡就會把上述這些檔案轉成模組並且加到關聯圖形中。

換個說法Loaders的主要目的有兩個：

第一～辨認哪些檔案需要被一些特殊的loader做轉換（例如：jsx 請babel-loader轉成javascript 檔案）。

第二～把那些被加到關聯圖形結構的檔案做轉換最終可能會被打包在一起。

4.Plugins:

當Loader 只有針對檔案轉換的動作時plugins 是最常被使用在執行動作和編譯打包模組時一些自定義的功能與切塊(chunks)功能，這也是webpack最強大的地方。

webpack擁有很多plugins ，可以透過這個連結 list of plugins找到更多plugins的相關資料與用法。

使用Plugins可以讓你的webpack變得功能更強大！

上面這四個概念的使用主要是撰寫在一個設定檔內～也就是webpack的設定物件(Json格式的檔案)，接下來我們可以來試著寫寫這個設定檔。

Step1:

webpack在執行時會先在當下目錄找找有沒有一個檔案叫做『webpack.config.js』檔案，用這個檔案內撰寫的設定作為執行時的 entry 的檔案名稱設定是哪個？output的設定載哪邊？Loaders要用到哪些？Plugins有哪些的依據。

在撰寫webpack.config.js之前我們先在webpack資料夾下新增一些檔案來開始我們第一個小小專案吧！

1. 我們新增一個資料夾叫做app 並且在app裡面在新增一個叫做index.js的檔案。

2. 在webpack專案目錄我們在多新增一個叫做index.html的檔案。

3. 最後在webpack專案目錄下新增webpack.config.js作為webpack的設定檔。

大致結構如下:

/webpack/

|--- /app/

| |-----index.js
|

|---index.html

|---package.json
|---webpack.config.js

然後我們在app/index.js 內撰寫下列程式碼：

function componet() {
  var element = document.createElement('div');      // 新增一個div tag
  element.innerHTML = '<h2>Hello World</h2>'  // 在div 之後加入這段html code
  element.innerHTML += '<button id="myBtn">Test</button>'  // 在Hello World 後加入一個button
  return element;
}

document.body.appendChild(componet())

在webpack.config.js的檔案內我們先撰寫Entry起始檔案。

module.exports = {
  entry: {
    app: "./app/index.js"
  }
}

這邊在跟webpack講說：Entry的application 入口檔案為在app資料夾下的index.js這個檔案。接著我們再跟webpack講打包後的程式要放在哪邊！所以webpack.config.js內容改成如下：

const path = require('path')    // nodejs core module

module.exports = {
  entry: {
    app: "./app/index.js"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

在最上面的const path = require('path')這行是nodejs本身的core function讓我們專案的路徑可以用path這個物件來處理。
output的內容中我們可以看到path: path.resolve(__dirname, 'dist')的設定就是要webpack把打包後的檔案放在目前專案下的dist資料夾內。然後filename: 'bundle.js'就是把打包後的名字取為'bundle.js'。
最後在index.html內撰寫下列程式碼：

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

到這邊我們要注意的是在 body內的< script src="dist/bundle.js"> 這邊會這樣寫是因為我們webpack最後把打包的檔案放在dist內並且取名bundle.js所以index.html這邊要這樣設定讓index.html可以去找到這個專案要執行的最後打包完的javascript檔。

Step2 開始打包:

這時候我們可以進行打包的動作，回到webpack這個資料夾的命令列中目前我們知道webpack程式已經安裝在node_modules資料夾下，所以執行打包的時候就可以下下面指令：

~/webpack $ node_modules/.bin/webpack

執行完後會看到下列的內容並且會產生一個名為"dist"的資料夾，裡面存放著打包好的bundle.js這個檔案。

接著我們用瀏覽器開啟index.html 就會看到 Hello World 跟一個button在網頁上面了！
這代表我們撰寫的index.js 有正確被打包到bundle.js裡面，並且index.html執行bundle.js正確無誤也把該印的內容印到index.html內！

Step 3 修改下指令的方式：

在上一篇webpack的學習(2)裡面有提到我們是採用Local Installation的方式來安裝，但是每次打指令都要打那麼長是一件很不方便的事情，所以我們可以透過npm的package.json提供的"scripts"屬性方便我們做打包的動作！

首先我們開啟package.json這個檔案並找到scripts這個屬性位置。

在這邊我們對scripts新增一個屬性叫做 'start' 並且內容為 'webpack' 如下(注意test最後面要有個 " , " 這是json格式喔！)

回到命令列我們要透過npm 來幫我們跑 webpack就只要下"npm run start " 他就會在package.json中找scripts 中名為 start的這個屬性的內容（webpack)去執行，並且會自動去node_modules找出有沒有相關的軟體可以執行。

ps: 我們可以先把 dist 資料夾刪除然後再去執行 npm run start 就知道有沒有正確打包並生出dist。

一樣用瀏覽器打開index.html看看程式有沒有正確執行。

--------- 待續.

CloverHsc的Blog

搜尋此網誌