【W(wǎng)EBPACK v4.29.6 隨緣翻譯】3. 開始使用

開始使用

Webpack 用于編譯Javascript模塊烟很。一旦安裝，你可以通過wepack的CLI 或者 API 與其進(jìn)行“互動(dòng)”蜓耻。如果你是新手的話茫舶，請看完核心概念，或者這篇理解去了解你為什么你要使用它而不是其他工具刹淌。

基礎(chǔ)安裝

首先創(chuàng)建一個(gè)文件夾饶氏，并且初始化NPM 讥耗，并且局部安裝WEBPACK （有關(guān)局部安裝，請查看文章2),疹启，再然后安裝webpack-cli(這個(gè)工具用于命令行運(yùn)行WEBPACK）：

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

 在這篇指南中我們始終使用 diff 代碼向你展示文件夾古程，文件以及代碼的變化。

現(xiàn)在我們要?jiǎng)?chuàng)建一下文件夾結(jié)構(gòu)喊崖，文件以及文件的內(nèi)容

project

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  let element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

我們依然需要判斷我們的package.json 以確保我們將包標(biāo)記為 "私有的(private)"挣磨，最好將main entry 移除。這樣可以避免你的代碼被意外發(fā)布(到 npm.js 之類的贷祈，我想)

如果你想學(xué)習(xí)更多package.json 的工作原理，我們推薦你閱讀 [npm documentation] (https://docs.npmjs.com/files/package.json)

package.json

 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }

在上面示例中喝峦，必須要有依賴項(xiàng)存在于 <scrip> 標(biāo)簽中(位于index.html)势誊，我們的 index.js 文件依賴于 lodash 才能運(yùn)行。然而因?yàn)樗鼪]有顯式地聲明對lodash地需求谣蠢；它只是確保全局變量 _ 的存在（index.js）粟耻。

使用這個(gè)方式管理Javascript項(xiàng)目會(huì)引發(fā)一下問題。

對于哪段腳本需要哪段外部庫眉踱，顯示不夠直觀挤忙。
如果一個(gè)依賴丟失，或者以錯(cuò)誤的順序引入谈喳，程序不能正常運(yùn)行册烈。
3.如果一個(gè)依賴被包含，但是并沒有被使用婿禽，瀏覽器會(huì)強(qiáng)制下載不需要的代碼赏僧。

webpack 可以有效解決以上問題。

創(chuàng)建一個(gè) bundle

首先我們需要稍稍調(diào)整目錄結(jié)構(gòu)扭倾，將 source code(/src) 從 distribution code(/dist)中分離出來淀零。 "source" code 是我們即將要編輯的代碼，而 "distribution" code 是我們最小化并且優(yōu)化后的輸出代碼膛壹，用以被瀏覽器加載驾中。

project

  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

如果要對index.js 綁定 lodash 依賴項(xiàng)，我們需要局部安裝這個(gè)庫模聋。

npm install --save lodash

  當(dāng)安裝一個(gè)用于構(gòu)建你產(chǎn)品的包的時(shí)候肩民，你需要使用 "npm install --save"。如果你安裝用于開發(fā)意圖的包链方，(例如 linter, testing libraries, ..) 此改，則可以使用 "npm install --save-dev". 更多資訊請查閱 (npm document)[https://docs.npmjs.com/cli/install](國內(nèi)可能無法訪問）

現(xiàn)在可以將 lodash 引入我們的腳本：

+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

現(xiàn)在，因?yàn)槲覀儗⒁獦?gòu)建代碼侄柔，所以必須要更改 index.html 文件共啃。首先移除 lodash <script>占调，因?yàn)槲覀円呀?jīng)引入它了，并且更改其他<script> 標(biāo)簽以加載我們的生成后的包移剪，而不是原始的 /src 文件：

  <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

在以上步驟究珊，index.js 顯式地包含了 lodash 到當(dāng)前文件，并且綁定為 _ (沒有全局污染)纵苛。 webpack可以使用以上的陳述剿涮，即一個(gè)模塊需要哪些依賴項(xiàng)，去構(gòu)建一個(gè)依賴項(xiàng)圖譜攻人。然后使用圖譜去生成取试，腳本可以被正常順序被執(zhí)行的、優(yōu)化后的包怀吻。

根據(jù)以上所述瞬浓，運(yùn)行 npx webpack，它會(huì)將 src/index.js 視為入口點(diǎn)蓬坡，并且會(huì)生成 dist/main.js 作為輸出點(diǎn)猿棉。 npx 命令（在node8.2/npm5.2.0 以及更高版本的包中被攜帶)，會(huì)運(yùn)行webpack 二進(jìn)制包(./node_modules/.bin/webpack) ：

npx webpack

...
Built at: 13/06/2018 11:52:07
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

你的控制臺(tái)輸出可能會(huì)有一些不符屑咳，但是如果構(gòu)建是成功的那么你則不必理會(huì)萨赁。同時(shí)，不需要關(guān)系那些 warning兆龙，我們稍后會(huì)處理掉它杖爽。

開打 index.html ，如果一切順利紫皇，你應(yīng)該能看到以下文字：'Hello webpack'

Modules

import 和 export 語句已經(jīng)被 es2015標(biāo)準(zhǔn)化掂林。雖然他們還不能被大多數(shù)瀏覽器支持，但是webpack 已經(jīng)支持了坝橡。
前面的場景泻帮，webpack 已經(jīng) "transpiles" （translate + compile）了代碼所以他們可以被更老的瀏覽器支持。如果你觀察 dist/main.js计寇，你可能看到webpack 是如何做到這一點(diǎn)的锣杂，這真是天才了！除了 import 和 export 番宁，wepack 支持很多其他的模塊引入方法元莫，詳情請查閱 (Module API) [https://webpack.js.org/api/module-methods]

注意webpack 實(shí)際上并沒有更改代碼除了 import 和 export 語句。如果你是使用 ES2015特性的話蝶押，確保使用一個(gè)轉(zhuǎn)譯器（transpiler）踱蠢，例如 babel 或者 Buble，詳情請查閱 webpack的 loader system

使用配置文件

在版本4的時(shí)候， webpack 已經(jīng)不需要任何配置文件茎截，但是大多數(shù)項(xiàng)目依然會(huì)需要更復(fù)雜的生成步驟苇侵，這也是為什么webpack還在支持配置文件的原因。這比手動(dòng)的在控制臺(tái)上敲很多命令高效多了企锌，所以現(xiàn)在來創(chuàng)建一個(gè)吧：

project

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

現(xiàn)在讓我們使用新創(chuàng)建的配置文件來再次構(gòu)建應(yīng)用程序:

npx webpack --config webpack.config.js

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

 如果webpack.config.js 出現(xiàn)榆浓，webpack命令會(huì)直接使用它。我們使用 --config 選項(xiàng)只是告訴你撕攒，你可以傳入一個(gè)任何名稱的配置文件而已陡鹃。這一點(diǎn)會(huì)非常有用，當(dāng)配置文件變得復(fù)雜的時(shí)候抖坪，我們需要將他切割為很多塊萍鲸。

配置文件提供了更多比CLI 更快捷的東西。我們可以使用這個(gè)方法指定 loader, rules, plugins, resolve options 以及其他增強(qiáng)方法擦俐。

NPM Scripts

從 webpack CLI 運(yùn)行本地webpack是一件不是特別有趣的事情脊阴，我們可以設(shè)置一個(gè)快捷方式。現(xiàn)在來對比一下添加npm script 之后的 package.json吧：

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
-      "test": "echo \"Error: no test specified\" && exit 1" 
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

from now on捌肴， run run build 命令可以代替我們之前使用過的 npx 命令蹬叭。注意在 scripts中藕咏，我們使用它們的名字去引用其他局部安裝后的npm packages状知，就像我們之前對npx做的一樣。這個(gè)方便的東西是在大多數(shù)基于npm 的項(xiàng)目中的標(biāo)準(zhǔn)孽查，因?yàn)樗试S所有貢獻(xiàn)者使用同一集合的普通腳本(每個(gè)都要標(biāo)簽饥悴，像 --config 如果必要的話)。

運(yùn)行下面的命令盲再，看看你的腳本別名是否生效：

npm run build

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/.

  在npm run build 后面添加2個(gè)dashes西设，后面緊跟著你的參數(shù)，可以將自定義參數(shù)傳入webpack答朋。 例如： num run build -- --colors.

結(jié)論

現(xiàn)在你已經(jīng)可以構(gòu)建基本的包了贷揽，現(xiàn)在你應(yīng)該移步到下一個(gè)篇指南[Asset Management] ，學(xué)習(xí)如果使用webpack管理資源梦碗，像是 images 以及 fonts 禽绪。目前，你的項(xiàng)目應(yīng)該看起來是這個(gè)樣子的

project

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- main.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

 如果你在使用npm5, 你應(yīng)該會(huì)同時(shí)看到一個(gè)package-lock.json 文件在你的目錄中洪规。

如果想了解更多關(guān)于webpack的設(shè)計(jì)印屁，你可以留意basic concepts,以及configuration頁面，亦或者斩例，API章節(jié)將深入理解非常多webpack 提供的接口雄人。