Webpack 入門

標籤：char   script   plugins   一段   add   export   word   自動產生   define   

Webpack 入門

Webpack 是目前流行的打包工具，如何安裝它呢？

1. 安裝 Node Js

首先，Webpack 是基於 NodeJs 的工具，你必須首先安裝 NodeJs. NodeJs 僅僅只需要在你的系統中安裝一次就可以了。

2. 全域安裝 Webpack

我們希望能夠在系統的任何檔案夾中使用 Webpack，使用的方式是通過 Webpack 命令來完成的，這需要我們全域安裝 Webpack。這也只需要安裝一次，以後每個項目就不需要重新全域安裝了。

$ npm install webpack -g

 成功安裝之後，你應該能夠在任何目錄中執行 webpack 命令，如果你還沒有項目的設定檔的話，應該會看到當前的 Webpack 版本和一個命令的協助列表。

> webpackwebpack 1.12.12Usage: https://webpack.github.io/docs/cli.htmlOptions:  --help, -h, -?  --config  --context  --entry  --module-bind  --module-bind-post  --module-bind-pre  --output-path  --output-file  --output-chunk-file  --output-named-chunk-file  --output-source-map-file  --output-public-path  --output-jsonp-function  --output-pathinfo  --output-library  --output-library-target  --records-input-path  --records-output-path  --records-path  --define  --target  --cache                                                                                           [default: true]  --watch, -w  --watch which closes when stdin ends  --watch-aggregate-timeout  --watch-poll  --hot  --debug  --devtool  --progress  --resolve-alias  --resolve-loader-alias  --optimize-max-chunks  --optimize-min-chunk-size  --optimize-minimize  --optimize-occurence-order  --optimize-dedupe  --prefetch  --provide  --labeled-modules  --plugin  --bail  --profile  -d                                    shortcut for --debug --devtool sourcemap --output-pathinfo  -p                                    shortcut for --optimize-minimize  --json, -j  --colors, -c  --sort-modules-by  --sort-chunks-by  --sort-assets-by  --hide-modules  --display-exclude  --display-modules  --display-chunks  --display-error-details  --display-origins  --display-cached  --display-cached-assets  --display-reasons, --verbose, -vOutput filename not configured.PS C:\study\webpack\w1>

 

注意，最後還提示你，當前沒有找到 webpack 設定檔。

3. 在項目中安裝 Webpack

最好在你的項目中也包含一份獨立的 Webpack，這樣你更方便管理你的項目。為什麼又是全域安裝，又是局部安裝呢？可以參考這裡的說明。

3.1 確認建立 NPM 專案檔

首先，你需要已經建立了 NPM 的專案檔，如果沒有的話，使用 init 命令建立它。

 npm init

你需要回答一系列問題。最終你會得到一個名為 package.json 的 NPM 專案檔，如果你願意的話，手工建立它也不錯。甚至你可以直接複製一個過來。

一個新建立的 package.json 內容應該如下所示。

{  "name": "w1",  "version": "1.0.0",  "description": "",  "main": "index.js",  "dependencies": {},  "devDependencies": {},  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC"}

 

 

3.2 在項目中安裝 Webpack

現在，可以在項目中安裝 Webpack 了，直接使用 NPM 的 install 命令。

npm install webpack --save-dev

 --save-dev 的意思是說 webpack 是一個開發工具，我們需要將這一點儲存到 package.Json 檔案中。

install 命令可以簡化為單個字元 i，注意是小寫 i。

--save-dev 還可以簡化為大寫的 S，寫成 -S，你可以在這裡查看 instal 的更詳細使用說明。

npm i webpack --S

你應該看到一個長長的輸出，這是由於 Webpack 是一個很複雜的工具。它依賴很多的其它工具。

> npm install webpack --save-dev[email protected] w1`-- [email protected]  +-- [email protected]  +-- [email protected]  +-- [email protected]  +-- [email protected]  | +-- [email protected]  | `-- [email protected]  +-- [email protected]  +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | `-- [email protected]  +-- [email protected]  | +-- [email protected]  | | `-- [email protected]  | `-- [email protected]  |   +-- [email protected]  |   +-- [email protected]  |   +-- [email protected]  |   +-- [email protected]  |   +-- [email protected]  |   `-- [email protected]  +-- [email protected]  | `-- [email protected]  +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | | `-- [email protected]  | |   `-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | | `-- [email protected]  | `-- [email protected]  |   `-- [email protected]  +-- [email protected]  | `-- [email protected]  +-- [email protected]  | `-- [email protected]  +-- [email protected]  +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | +-- [email protected]  | `-- [email protected]  |   +-- [email protected]  |   +-- [email protected]  |   | +-- [email protected]  |   | | +-- [email protected]  |   | | | +-- [email protected]  |   | | | `-- [email protected]  |   | | `-- [email protected]  |   | +-- [email protected]  |   | `-- [email protected]  |   +-- [email protected]  |   `-- [email protected]  +-- [email protected]  | +-- [email protected]  | `-- [email protected]  |   +-- [email protected]  |   | +-- [email protected]  |   | `-- [email protected]  |   |   +-- [email protected]  |   |   | `-- [email protected]  |   |   +-- [email protected]  |   |   +-- [email protected]  |   |   | +-- [email protected]  |   |   | | `-- [email protected]  |   |   | |   +-- [email protected]  |   |   | |   +-- [email protected]  |   |   | |   `-- [email protected]  |   |   | +-- [email protected]  |   |   | `-- [email protected]  |   |   +-- [email protected]  |   |   | `-- [email protected]  |   |   +-- [email protected]  |   |   +-- [email protected]  |   |   +-- [email protected]  |   |   | `-- [email protected]  |   |   +-- [email protected]  |   |   +-- [email protected]  |   |   | +-- [email protected]  |   |   | | `-- [email protected]  |   |   | `-- [email protected]  |   |   +-- [email protected]  |   |   | +-- [email protected]  |   |   | `-- [email protected]  |   |   `-- [email protected]  |   |     +-- [email protected]  |   |     `-- [email protected]  |   +-- [email protected]  |   +-- [email protected]  |   +-- [email protected]  |   | `-- [email protected]  |   +-- [email protected]  |   | `-- [email protected]  |   +-- [email protected]  |   `-- [email protected]  |     +-- [email protected]  |     | `-- [email protected]  |     |   +-- [email protected]  |     |   `-- [email protected]  |     `-- [email protected]  `-- [email protected]    +-- [email protected]    `-- [email protected]      `-- [email protected]npm WARN optional Skipping failed optional dependency /chokidar/fsevents:npm WARN notsup Not compatible with your operating system or architecture: [email protected]npm WARN [email protected] No descriptionnpm WARN [email protected] No repository field.>

 

這時候，你再檢查一下 package.json 檔案，它應該多了三行。

{  "name": "w1",  "version": "1.0.0",  "description": "",  "main": "index.js",  "dependencies": {},  "devDependencies": {    "webpack": "^1.13.2"  },  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC"}

 

 

4.  Hello, Webpack

 

4.1 打包普通指令檔

寫一段普通的指令碼，例如，一個 Hellowrold 指令碼。當然了，這裡應該是 Hello，Webpack.

function hello(){    alert("Hello, Webpack!");}

 

儲存到你的項目根目錄中，檔案名稱就叫 hello.js

4.2 建立 Webpack 設定檔

Webpack 根據設定檔的配置來完成打包，預設的設定檔名稱是 webpack.config.js。

Webpack 的工作很簡單，就是打包，你需要告訴它打包的內容，還有輸出到哪裡。entry 就是入口，顯然 output 就是輸出。

我們讓 Webpack 將 hello.js 檔案打包後輸出到 bundle.js 檔案中。

module.exports = {  // 入口  entry: "./hello.js",  // 輸出的檔案名稱  output: {    filename: ‘bundle.js‘  }};

 在命令視窗，輸入 webpack 斷行符號執行。應該會看到如下的輸出。

> webpackHash: 05c39d9076887c35f015Version: webpack 1.13.2Time: 59ms    Asset     Size  Chunks             Chunk Namesbundle.js  1.44 kB       0  [emitted]  main   [0] ./hello.js 51 bytes {0} [built]>

 預設的入口檔案名稱為 index.js，如果你將 hello.js 改名為 index.js，還可以直接使用目錄名，不用提供檔案名稱。

module.exports = {  // 入口，預設入口檔案名稱為 index.js  entry: ".",  // 輸出的檔案名稱  output: {    filename: ‘bundle.js‘  }};

產生的 bundle.js 檔案內容為

/******/ (function(modules) { // webpackBootstrap/******/     // The module cache/******/     var installedModules = {};/******/     // The require function/******/     function __webpack_require__(moduleId) {/******/         // Check if module is in cache/******/         if(installedModules[moduleId])/******/             return installedModules[moduleId].exports;/******/         // Create a new module (and put it into the cache)/******/         var module = installedModules[moduleId] = {/******/             exports: {},/******/             id: moduleId,/******/             loaded: false/******/         };/******/         // Execute the module function/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******/         // Flag the module as loaded/******/         module.loaded = true;/******/         // Return the exports of the module/******/         return module.exports;/******/     }/******/     // expose the modules object (__webpack_modules__)/******/     __webpack_require__.m = modules;/******/     // expose the module cache/******/     __webpack_require__.c = installedModules;/******/     // __webpack_public_path__/******/     __webpack_require__.p = "";/******/     // Load entry module and return exports/******/     return __webpack_require__(0);/******/ })/************************************************************************//******/ ([/* 0 *//***/ function(module, exports) {    function hello(){        alert("Hello, Webpack!");    }/***/ }/******/ ]);

 最後就是我們的指令碼。

 

4.2 將指令碼嵌入到網頁中

剛剛只是一段指令碼，還需要放到網頁中才能執行。我們可以安裝一個自動幫我們產生宿主網頁的 webpack 外掛程式 html-webpack-plugin 來協助我們。

npm install html-webpack-plugin --save-dev

應該會看到如下的輸出。

> npm install html-webpack-plugin --save-dev[email protected] w1`-- [email protected]  +-- [email protected]  +-- [email protected]  | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | +-- [email protected]  | | `-- [email protected]  | +-- [email protected]  | `-- [email protected]  |   `-- [email protected]  +-- [email protected]  +-- [email protected]  | +-- [email protected]  | | +-- [email protected]  | | | +-- [email protected]  | | | +-- [email protected]  | | | +-- [email protected]  | | | | `-- [email protected]  | | | |   +-- [email protected]  | | | |   `-- [email protected]  | | | `-- [email protected]  | | +-- [email protected]  | | | `-- [email protected]  | | +-- [email protected]  | | | +-- [email protected]  | | | +-- [email protected]  | | | +-- [email protected]  | | | `-- [email protected]  | | |   `-- [email protected]  | | +-- [email protected]  | | | `-- [email protected]  | | `-- [email protected]  | `-- [email protected]  `-- [email protected]npm WARN optional Skipping failed optional dependency /chokidar/fsevents:npm WARN notsup Not compatible with your operating system or architecture: [email protected]npm WARN [email protected] No descriptionnpm WARN [email protected] No repository field.>

這說明這個外掛程式安裝好了。

配置 Webpack 使用這個外掛程式，協助我們產生一個網頁，然後將打包的指令碼自動插入到這個網頁中。

var HtmlwebpackPlugin = require(‘html-webpack-plugin‘);module.exports = {  // 入口  entry: ".",  // 輸出的檔案名稱  output: {    filename: ‘bundle.js‘  },  // 添加我們的外掛程式 會自動產生一個html檔案  plugins: [    new HtmlwebpackPlugin({      title: ‘Hello Webpack‘    })  ]};

其實，這個設定檔就是一段程式，注意第一行，一定要加上。

重新執行 webpack 命令。你會看到多產生了一個名為 index.html 的網頁。

> webpackHash: 05c39d9076887c35f015Version: webpack 1.13.2Time: 560ms     Asset       Size  Chunks             Chunk Names bundle.js    1.44 kB       0  [emitted]  mainindex.html  184 bytes          [emitted]   [0] ./index.js 51 bytes {0} [built]Child html-webpack-plugin for "index.html":        + 3 hidden modules>

 

開啟這個網頁，檢查插入的指令碼引用。

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Hello Webpack</title>  </head>  <body>  <script type="text/javascript" src="bundle.js"></script></body></html>

 

 

5. 總結

Webpack 是一個基於 NodeJs 的打包工具，我們可以使用它協助我們將指令碼打包，它還可以協助我們產生宿主網頁，並自動將打包之後的指令碼嵌入到這個網頁中。

 

附錄：

html-webpack-plugin 外掛程式的使用說明

Webpack 入門