1.Concepts（概念）

???At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

what-is-webpack.png

QQ截圖20180521140350.png

• Entry:

An entry point indicates which module webpack should use to begin building out its internal dependency graph, webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).
By default its value is ./src/index.js, but you can specify a different (or multiple entry points) by configuring the entry property in the webpack configuration
這段話也摘自官方蜒犯，大概意思是說webpack在構(gòu)建依賴生成包模塊是有章可循的组橄，最終生成的是一個(gè)個(gè)小模塊，有輸出就一定有輸入罚随，然后根據(jù)這個(gè)入口文件來直接或間接的打包相關(guān)依賴玉工。因此entry是用來配置入口文件的。有一個(gè)默認(rèn)值為'./src/index.js',但是可以根據(jù)webpack的配置屬性來修改這個(gè)默認(rèn)值淘菩，也可以配置多個(gè)入口文件遵班。

• Output:

The output property tells webpack where to emit the bundles it creates and how to name these files,大概意思就是告訴webpack，將依賴圖最終生成的模塊如何命名潮改，并且要放在什么地方（在那個(gè)目錄下狭郑？）

• Loaders:

Out of the box, webpack only understands JavaScript files. Loaders allow webpack to process other types of files and converting them into valid modules that can be consumed by your application and added to the dependency graph.大概意思就是webpack本身只能處理js文件，但是webpack內(nèi)部生成的依賴關(guān)系可不只有js文件汇在，還有其他的文件如css,image,scss,less等等文件翰萨，但是通過對應(yīng)的loaders就可以讓webpack來處理對應(yīng)的文件類型，這樣有了loaders糕殉，無論什么樣的文件缨历，只要有對應(yīng)的loader以蕴，webpack都是能處理的。一言以蔽之辛孵，loaders能夠轉(zhuǎn)換文件類型丛肮。

• Plugins:

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks, from bundle optimization, assets management or inject environment variables.摘自官方文檔，大概意思是雖然loaders能夠轉(zhuǎn)換某一特定的文件類型魄缚，但是插件能夠提供的功能比loaders更多宝与，如捆綁優(yōu)化，資產(chǎn)管理冶匹，注入環(huán)境變量（注入環(huán)境變量可以幫助用戶在執(zhí)行項(xiàng)目構(gòu)建時(shí)使用自定義的變量值動(dòng)態(tài)替換自定義的變量习劫。），雖然不是很理解什么捆綁優(yōu)化嚼隘，資產(chǎn)管理诽里，但字面意思來理解就是插件可以在構(gòu)建項(xiàng)目的時(shí)候做一些優(yōu)化操作，比如代碼的壓縮飞蛹，自動(dòng)添加前綴等等谤狡，。

• Mode:

By setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.大概意思是通過將mode參數(shù)設(shè)置為development卧檐，production或none墓懂，您可以啟用webpack內(nèi)置的與每個(gè)環(huán)境相對應(yīng)的優(yōu)化。 默認(rèn)值是生產(chǎn)霉囚。具體一點(diǎn)就是可以做一些與環(huán)境相關(guān)的優(yōu)化操作捕仔。所謂的環(huán)境指的是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，比如開發(fā)環(huán)境下可能會(huì)開啟一些列的工具檢測盈罐，代碼注釋榜跌，但是在生產(chǎn)環(huán)境不需要這些。

• ## Browser Compatibility:

webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). webpack needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.
大概意思就是說webpack支持所有符合ES5標(biāo)準(zhǔn)的瀏覽器（不支持IE8及以下版本）盅粪。如果需要支持更低的瀏覽器就需要對應(yīng)的補(bǔ)丁了斜做。

2.了解了webpack的核心概念，再來看一個(gè)最基礎(chǔ)的例子

Webpack is used to compile JavaScript modules. Once installed, you can interface with webpack either from its CLI or API.
意思是Webpack用于編譯JavaScript模塊湾揽。 安裝完成后，您可以通過其CLI或API與webpack進(jìn)行連接笼吟。因此使用webpack的第一步是安裝库物，具體步驟如下：

step1:

First let's create a directory, initialize npm, install webpack locally, and install the webpack-cli (the tool used to run webpack on the command line):意思為首先需要?jiǎng)?chuàng)建一個(gè)文件夾目錄，用npm進(jìn)行初始化贷帮，本地安裝webpack 和webpack-cli命令如下：

• mkdir webpack-demo && cd webpack-demo
• npm init -y

• npm install webpack webpack-cli --save-dev
  執(zhí)行完畢后就會(huì)生成這樣一個(gè)目錄：

  
  
  26.png

step2:

在項(xiàng)目更目錄下創(chuàng)建如下的文件和文件夾：

27.png

并在對應(yīng)的文件中添加一些內(nèi)容：
index.js:
下載安裝 npm install --save lodash

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

 // Lodash, currently included via a script, is required for this line to work
 // 引用了_變量戚揭，因此必須保證lodash腳本在index.js之前引入
 element.innerHTML = _.join(['Hello', 'webpack'], ' ');

 return element;
}

document.body.appendChild(component());

index.html:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

step3:

We also need to adjust our package.json file in order to make sure we mark our package as private, as well as removing the main entry. This is to prevent an accidental publish of your code意思是修改package.json文件，以確保我們將包標(biāo)記為私有文件撵枢，并刪除主條目民晒。 這是為了防止意外發(fā)布您的代碼精居。
package.json:

{
 "name": "webpack-demo",
 "version": "1.0.0",
 "description": "",
"main": "index.js", // 這一行刪除
"private": true, // 新添加這一行
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "webpack": "^4.8.3",
  "webpack-cli": "^2.1.3"
 }
}

step4:

在根目錄運(yùn)行npx webpack，運(yùn)行完畢后在瀏覽器打開index.html,不出意外的話就會(huì)看大在瀏覽器上輸出了Hello webpack潜必。
很神奇靴姿，index.html中引入到dist/main.js并不是我們自己編寫的，卻能引入磁滚，這是因?yàn)槲覀冊谶\(yùn)行webpack的時(shí)候沒有指定輸入和輸出佛吓，webpack就用的自己默認(rèn)的輸入和輸出。默認(rèn)輸入是./src/index.js垂攘， 默認(rèn)輸出是./dist/main.js.完成編譯后會(huì)在對應(yīng)的輸出目錄生成/dist/main.js文件维雇。
做到這一步貌似也用到了webpack，但好像上面提及到的webpack的核心內(nèi)容一個(gè)也沒有見到晒他，唯一認(rèn)識到的也只是webpack默認(rèn)的輸入和輸出吱型。具體的內(nèi)容從下章節(jié)開始。