什麼是 Webpack ?

Webpack 是針對所有前端程式的管理整合工具。工程師編寫程式模組（html, css, js, sass, pug, babel, … etc.），使用 webpack 打包輸出靜態資產（assets）,配合Babel, ES6使用，可以寫出乾淨可復用的代碼，做到更好的前端程式管理。這一篇先示範基礎安裝和設定基本描述檔。

安裝環境

  1. 安裝 Node.js

  2. 開一個專案資料夾，建置 npm 專案

1
npm init

設定 package.json

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "Your Project Name",
  "version": "1.0.0",
  "description": "Webpack project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "author": "Your Name",
  "license": "ISC",
}
  1. 安裝開發端套件 Webpack
    安裝全域(global)
1
npm -g i webpack

只有第一次使用webpack需要安裝全域，裝過一次之後就可以不用再安裝global

專案開發端安裝套件

1
npm i -D webpack

組織專案架構

在專案建立 src 和 dist 資料夾。

  • src: 工程師寫的程式放這裡。
  • dist: webpack 自動打包出來的檔案會放這裡。
  • src/app.js: 建立一支 js 檔案，等會要來測試 webpack 自動打包的功能用。

app.js 內可以隨意寫 console 來測試

1
console.log('Hello World!');

設定描述檔

  1. 在專案下新增webpack.config.js檔案。
1
2
3
4
5
6
module.exports = {
  entry: './src/app.js',
  output: {
    filename: './dist/app.bundle.js'
  },
}
  • entry: 開始執行打包的入口
  • output: 輸出結果設定
    • filename: 輸出結果的名稱
  1. 修改package.json檔案 scripts
1
2
3
4
5
6
7
8
{
  ...
  "scripts": {
    "dev": "webpack -d --watch",
    "prod": "webpack -p"
  },
  ...
}
  • -d: 開發模式輸出，不會 minify js
  • –watch: 監聽程式碼修改，支援即時輸出
  • -p: 產品模式輸出，會 minify js

執行 webpack 打包測試

  1. 執行package.json內script設定的 dev
1
npm run dev
  • 結果：會在 dist 資料夾內產app.bundle.js，沒有 minify
  1. 執行package.json內script設定的 prod
1
npm run prod
  • 結果：會在 dist 資料夾內產app.bundle.js，有 minify

基本 webpack 練習完成囉～實際操作影片可觀賞 Ihatetomatoes 大大的 YOUTUBE 教學Webpack 2 Tutorial - Installation and Config，感謝觀看 :)

更新：2017/06/30 Webpack 版本更新到 3 囉 ！所以直接測試 3，發現無痛接軌沒問題，實作在 github，之後就直接都用 3 版實作囉。

參考資料