摘要：了解什么是官方文檔是這樣介紹的點我了解官方文檔簡單的來說，可以看做是模塊打包機它做的事情是，分析你的項目結構，找到模塊以及其它的一些瀏覽器不能直接運行的拓展語言，等，并將其轉換和打包為合適的格式供瀏覽器使用。

官方文檔是這樣介紹的：點我了解官方文檔

簡單的來說，WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用。

Webpack是由Tobias Koppers開發的一個開源前端模塊構建工具。它的基本功能是將以模塊格式書寫的多個JavaScript文件打包成一個文件，同時支持CommonJS和AMD格式。但讓它與眾不同的是，它提供了強大的loader API來定義對不同文件格式的預處理邏輯，從而讓我們可以將CSS、模板，甚至是自定義的文件格式當做JavaScript模塊來使用。Webpack 基于loader還可以實現大量高級功能，比如自動分塊打包并按需加載、對圖片資源引用的自動定位、根據圖片大小決定是否用base64內聯、開發時的模塊熱替換等等，可以說是目前前端構建領域最有競爭力的解決方案之一。

Webpack與Gulp、Grunt沒有什么可比性，它可以看作模塊打包機，通過分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用。Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。

他們的工作方式也有較大區別：

Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，工具之后可以自動替你完成這些任務。

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

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

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack

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

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

然后你就可以重復上面的npm安裝

//全局安裝
cnpm install -g webpack
//安裝到你的項目目錄
cnpm install --save-dev webpack

此時你會發現速度飛快。

你可以手動在你的項目根目錄里面創建一個package.json文件，這是一個標準的npm說明文件，里面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init（cnpm init）命令可以自動創建這個package.json文件

cnpm init

輸入這個命令后，終端會問你一系列諸如項目名稱，項目描述，作者等信息，不過不用擔心，如果你不準備在npm中發布你的模塊，這些問題的答案都不重要，回車默認即可（如下圖）。

可以看出webpack同時編譯了main.js 和Greeter,js,現在打開index.html,可以看到如下結果

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

繼續上面的例子來說明如何寫這個配置文件，在當前練習文件夾的根目錄下新建一個名為webpack.config.js的文件，我們在其中寫入如下所示的簡單配置代碼，目前的配置主要涉及到的內容是入口文件路徑和打包后文件的存放路徑。

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

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

第二種方法成功運行，接下來看一個更方便的方法。

在命令行中輸入命令需要代碼類似于node_modules/.bin/webpack這樣的路徑其實是比較煩人的，不過值得慶幸的是npm可以引導任務執行，對npm進行配置后可以在命令行中使用簡單的npm start命令來替代上面略微繁瑣的命令。在package.json中對scripts對象進行相關設置即可，設置方法如下。

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

npm的start命令是一個特殊的腳本名稱，其特殊性表現在，在命令行中使用npm start就可以執行其對于的命令，如果對應的此腳本名稱不是start，想要在命令行中運行時，需要這樣用npm run {script name}如npm run build，我們在命令行中輸入npm start試試，輸出結果如下：

如果出現讓你安裝webpack-cli的提示，那你就輸入yes，安裝webpack-cli依賴

首先創建空文件夾通過命令全局安裝webpack

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

其次初始化你的文件根目錄并且安裝依賴

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

然后創建你的項目

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

根目錄下創建并配置webpack.config.js文件

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

然后在根目錄下運行webpack

webpack

輸出成功后，打開你的html文件，即可看到完整的項目！