摘要：了解什么是官方文檔是這樣介紹的點(diǎn)我了解官方文檔簡(jiǎn)單的來(lái)說(shuō)，可以看做是模塊打包機(jī)它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言，等，并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。

官方文檔是這樣介紹的：點(diǎn)我了解官方文檔

簡(jiǎn)單的來(lái)說(shuō)，WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。

Webpack是由Tobias Koppers開(kāi)發(fā)的一個(gè)開(kāi)源前端模塊構(gòu)建工具。它的基本功能是將以模塊格式書(shū)寫(xiě)的多個(gè)JavaScript文件打包成一個(gè)文件，同時(shí)支持CommonJS和AMD格式。但讓它與眾不同的是，它提供了強(qiáng)大的loader API來(lái)定義對(duì)不同文件格式的預(yù)處理邏輯，從而讓我們可以將CSS、模板，甚至是自定義的文件格式當(dāng)做JavaScript模塊來(lái)使用。Webpack 基于loader還可以實(shí)現(xiàn)大量高級(jí)功能，比如自動(dòng)分塊打包并按需加載、對(duì)圖片資源引用的自動(dòng)定位、根據(jù)圖片大小決定是否用base64內(nèi)聯(lián)、開(kāi)發(fā)時(shí)的模塊熱替換等等，可以說(shuō)是目前前端構(gòu)建領(lǐng)域最有競(jìng)爭(zhēng)力的解決方案之一。

Webpack與Gulp、Grunt沒(méi)有什么可比性，它可以看作模塊打包機(jī)，通過(guò)分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。Gulp/Grunt是一種能夠優(yōu)化前端的開(kāi)發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過(guò)Webpack的優(yōu)點(diǎn)使得Webpack在很多場(chǎng)景下可以替代Gulp/Grunt類(lèi)的工具。

他們的工作方式也有較大區(qū)別：

Grunt和Gulp的工作方式是：在一個(gè)配置文件中，指明對(duì)某些文件進(jìn)行類(lèi)似編譯，組合，壓縮等任務(wù)的具體步驟，工具之后可以自動(dòng)替你完成這些任務(wù)。

Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過(guò)一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開(kāi)始找到你的項(xiàng)目的所有依賴(lài)文件，使用loaders處理它們，最后打包為一個(gè)（或多個(gè)）瀏覽器可識(shí)別的JavaScript文件。

Webpack可以使用npm安裝，新建一個(gè)空的文件夾（名字隨意），在終端中轉(zhuǎn)到該文件夾后執(zhí)行下述指令就可以完成安裝。

//全局安裝
npm install -g webpack
//安裝到你的項(xiàng)目目錄
npm install --save-dev webpack

npm在國(guó)內(nèi)安裝會(huì)比較慢，所以可以使用淘寶 NPM 鏡像定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm，首先要安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
//查看cnpm是否安裝成功
cnpm -v
//如果出現(xiàn)版本號(hào)的信息，說(shuō)明你安裝成功

然后你就可以重復(fù)上面的npm安裝

//全局安裝
cnpm install -g webpack
//安裝到你的項(xiàng)目目錄
cnpm install --save-dev webpack

此時(shí)你會(huì)發(fā)現(xiàn)速度飛快。

你可以手動(dòng)在你的項(xiàng)目根目錄里面創(chuàng)建一個(gè)package.json文件，這是一個(gè)標(biāo)準(zhǔn)的npm說(shuō)明文件，里面蘊(yùn)含了豐富的信息，包括當(dāng)前項(xiàng)目的依賴(lài)模塊，自定義的腳本任務(wù)等等。在終端中使用npm init（cnpm init）命令可以自動(dòng)創(chuàng)建這個(gè)package.json文件

cnpm init

輸入這個(gè)命令后，終端會(huì)問(wèn)你一系列諸如項(xiàng)目名稱(chēng)，項(xiàng)目描述，作者等信息，不過(guò)不用擔(dān)心，如果你不準(zhǔn)備在npm中發(fā)布你的模塊，這些問(wèn)題的答案都不重要，回車(chē)默認(rèn)即可（如下圖）。

可以看出webpack同時(shí)編譯了main.js 和Greeter,js,現(xiàn)在打開(kāi)index.html,可以看到如下結(jié)果

Webpack擁有很多其它的比較高級(jí)的功能（比如說(shuō)本文后面會(huì)介紹的loaders和plugins），這些功能其實(shí)都可以通過(guò)命令行模式實(shí)現(xiàn)，但是正如前面提到的，這樣不太方便且容易出錯(cuò)的，更好的辦法是定義一個(gè)配置文件，這個(gè)配置文件其實(shí)也是一個(gè)簡(jiǎn)單的JavaScript模塊，我們可以把所有的與打包相關(guān)的信息放在里面。

繼續(xù)上面的例子來(lái)說(shuō)明如何寫(xiě)這個(gè)配置文件，在當(dāng)前練習(xí)文件夾的根目錄下新建一個(gè)名為webpack.config.js的文件，我們?cè)谄渲袑?xiě)入如下所示的簡(jiǎn)單配置代碼，目前的配置主要涉及到的內(nèi)容是入口文件路徑和打包后文件的存放路徑。

const path=require("path");
module.exports={
  //JavaScript執(zhí)行入口文件,
  entry:"./app/main.js",
  //需要指定一下輸出的路徑path和輸出的文件名filename
  output:{
    path:path.resolve(__dirname,"./public"),  //自定義輸出文件所在目錄
    filename: "bundle.js"http://打包后輸出文件的文件名
  },
  //設(shè)置mode
   mode: "development" // 設(shè)置mode
}

有了這個(gè)配置之后，再打包文件，只需在終端里運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會(huì)自動(dòng)引用webpack.config.js文件中的配置選項(xiàng)，示例如下：

第二種方法成功運(yùn)行，接下來(lái)看一個(gè)更方便的方法。

在命令行中輸入命令需要代碼類(lèi)似于node_modules/.bin/webpack這樣的路徑其實(shí)是比較煩人的，不過(guò)值得慶幸的是npm可以引導(dǎo)任務(wù)執(zhí)行，對(duì)npm進(jìn)行配置后可以在命令行中使用簡(jiǎn)單的npm start命令來(lái)替代上面略微繁瑣的命令。在package.json中對(duì)scripts對(duì)象進(jìn)行相關(guān)設(shè)置即可，設(shè)置方法如下。

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.1"
  }
}

npm的start命令是一個(gè)特殊的腳本名稱(chēng)，其特殊性表現(xiàn)在，在命令行中使用npm start就可以執(zhí)行其對(duì)于的命令，如果對(duì)應(yīng)的此腳本名稱(chēng)不是start，想要在命令行中運(yùn)行時(shí)，需要這樣用npm run {script name}如npm run build，我們?cè)诿钚兄休斎?b>npm start試試，輸出結(jié)果如下：

如果出現(xiàn)讓你安裝webpack-cli的提示，那你就輸入yes，安裝webpack-cli依賴(lài)

首先創(chuàng)建空文件夾通過(guò)命令全局安裝webpack

//全局安裝
npm install -g webpack
//或者--淘寶鏡像，速度比較快
cnpm install -g webpack

其次初始化你的文件根目錄并且安裝依賴(lài)

npm init  //根目錄初始化
npm install --save-dev webpack // 安裝Webpack

然后創(chuàng)建你的項(xiàng)目

eg：在根文件夾下創(chuàng)建一個(gè)src文件夾，src文件夾里面可以放入你的源代碼js，css等
    同樣根目錄下創(chuàng)建一個(gè)public文件夾，里面放入你的html文件它在這里目的在于引入打包后的js文件，這里我們先把       之后打包后的js文件命名為bundle.js

根目錄下創(chuàng)建并配置webpack.config.js文件

const path=require("path");
module.exports={
  //JavaScript執(zhí)行入口文件,
  entry:"./src/js/main.js",
  //需要指定一下輸出的路徑path和輸出的文件名filename
  output:{
    filename:"bundle.js",   //自定義輸出文件名
    path:path.resolve(__dirname,"./public/js")  //自定義輸出文件所在目錄
  },
  //設(shè)置mode
   mode: "development" // 設(shè)置mode
}

然后在根目錄下運(yùn)行webpack

webpack

輸出成功后，打開(kāi)你的html文件，即可看到完整的項(xiàng)目！