webpack 3 零基礎入門教程 #3 - 實現 hello world

原文發表於: www.rails365.net

如今咱們要先把 webpack 用起來。

爲了方便，咱們先用 npm 建立一個空項目。

1. 用 npm init 初始化項目

打開終端，運行以下命令:

# 隨便進一個目錄
$ cd ~/codes
# 建立一個存放 webpack 項目的目錄，名爲 hello-webpack
$ mkdir hello-webpack
$ npm init複製代碼

以後你會看到會提示你輸入一些內容，你不用管，直接所有回車：

name: (hello-wepback)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:複製代碼

最後，你會發現 hello-webpack 目錄下多出了一個名爲 package.json 的文件。

它的內容以下：

{
  "name": "hello-wepback",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}複製代碼

整個 json 文件的內容很簡單，主要是顯示這個項目的名稱、版本、做者、協議等信息，一看就能很清晰。

具體的信息這裏咱們先按下不表，之後咱們會跟這個文件常常打交道的。

2. 集成 webpack

如今項目是空的，沒有任何東西，咱們如今須要把 webpack 集成進來，讓這個項目能夠用這個 webpack。

咱們在終端上輸入以下命令：

$ npm install --save-dev webpack複製代碼

你會看到正在安裝 webpack 的進度，稍等片刻，成功以後，咱們再來看看 package.json 這個文件的內容。

{
  "name": "hello-wepback",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1"
  }
}複製代碼

多了下面這幾行：

"devDependencies": {
    "webpack": "^3.8.1"
  }複製代碼

什麼意思呢？就是說，我如今這個項目依賴於 webpack 這個工具，就算之後別人獲得這個 package.json 文件，就會知道要安裝這個 webpack 了。

同時你也會發現，多了一個目錄，叫 node_modules，這個就是放剛纔安裝的 webpack 這個庫的全部要用到的源碼文件。

這點先了解這麼多，其實知道大概的意思就行。

3. 建立 javascript 文件

如今項目建立了，webpack 也集成到項目中了，該是要把 webpack 玩起來的時候了。

首先建立一個目錄叫 src，而後在該目錄下建立 javascript 文件，叫 app.js。

這個文件的內容最簡單，就輸出 hello world，以下所示：

console.log('hello world');複製代碼

4. 把 webpack 用起來

如今要把剛纔的 js 文件用 webpack 編譯一下。

編譯後輸出的文件，咱們放到一個目錄中，就叫 dist 好了。

先把這個目錄建立好。

如今的目錄結構是這樣的：

.
├── dist
├── node_modules
├── package.json
└── src
    └── app.js複製代碼

OK，如今開始轉化，在終端上輸入以下命令：

$ webpack ./src/app.js ./dist/app.bundle.js複製代碼

意思就是說，把 ./src/app.js 做爲源文件，把轉化後的結果放到 ./dist/app.bundle.js 文件中。

下面是輸出的結果：

成功了！

果真，在 dist 目錄下生成了 app.bundle.js 文件。

它的內容以下：

大約總共有 74 行，大小約是2.5 kb，能夠看出多出了很多東西，但至少 hello world 那一行源碼被包含進來了。

具體的內容，你打開轉化後的文件看看就知道了。

5 webpack 的其餘用法

上面介紹的只是 webpack 一個最簡單的功能，它可不止有這個用法，還有其餘的，咱們來介紹一下。

5.1 --watch

首先，在開發環境中，老是要一邊改，一邊看轉化效果吧，webpack 也能辦到，多加一個參數就好。

$ webpack --watch ./src/app.js ./dist/app.bundle.js複製代碼

輸出效果：

如今去改改 src/app.js 文件的內容，試試效果，看看 dist/app.bundle.js 是否實時變化了。

5.2 -p

以前轉化的 app.bundle.js 文件大約有 74 行代碼，差很少 2k 多的大小，好大啊，畢竟咱們的代碼只有一行而已。

在生產環境，或線上，咱們確定不但願這麼大的體積，畢竟體積越大，帶寬浪費就越多呀，下載也越慢。

若是要發佈到線上環境，咱們要把它壓縮一下的。

而 webpack 原本就有這樣的功能，也只是一個參數 -p

$ webpack -p ./src/app.js ./dist/app.bundle.js複製代碼

輸出以下：

能夠看到，輸出的文件相比之前的 2.5 kb 小了一些，大約 505 個字節。

咱們打開來看下：

好了，先說這麼多吧。