webpack官網：https://www.webpackjs.com/
目前的最新版本：webpack4
1、 webpack簡介
webpack是基於模塊化的打包（構建）工具，它把一切（js文件，圖片，sass等）視爲模塊
它通過一個開發時態的入口模塊爲起點，分析出所有的依賴關係，然後經過一系列的過程（壓縮、合併），最終生成運行時態的文件。
2、webpack的特點：
- 爲
前端工程化而生：webpack致力於解決前端工程化，特別是瀏覽器端工程化中遇到的問題，讓開發者集中注意力編寫業務代碼，而把工程化過程中的問題全部交給webpack來處理 - 簡單易用：
支持零配置，可以不用寫任何一行額外的代碼就使用webpack - 強大的生態：webpack是非常靈活、可以擴展的，webpack
本身的功能並不多，但它提供了一些可以擴展其功能的機制，使得一些第三方庫可以融於到webpack中 - 基於nodejs：由於
webpack在構建的過程中需要讀取文件，因此它是運行在node環境中的 - 基於模塊化：webpack在構建過程中要分析依賴關係，方式是
通過模塊化導入語句進行分析的，它支持各種模塊化標準，包括但不限於CommonJS、ES6 Module
3、webpack的安裝
webpack通過npm安裝，它提供了兩個包：
webpack：核心包包含了webpack構建過程中要用到的所有apiwebpack-cli：提供一個簡單的cli命令，它調用了webpack核心包的api，來完成構建過程
安裝方式：
- 全局安裝：可以全局使用webpack命令，但是無法
爲不同項目對應不同的webpack版本 - 本地安裝：推薦，每個
項目都使用自己的webpack版本進行構建
npm i webpack webpack-cli -D
#安裝開發依賴 -D
npm i jquery
#安裝生產依賴 （什麼都不用加）
-
-D 開發依賴---- 直接運行打包後的文件，不再需要webpack了，所以webpack是開發依賴 ，D 是development，最後安裝記錄在package.json裏的devDependencies中 -
生產依賴(
普通依賴) ---- 參與最終運行的是生產依賴，不參與最終運行的是開發依賴，最後安裝記錄在package.json裏的dependencies中
4、簡單使用
webpack
npx webpack
npx webpack --mode=development
npx webpack --mode=production
webpack命令要在工程根目錄下運行，就是src目錄的上級目錄，以便去找到src下的main.js
默認情況下，webpack會以./src/index.js作爲入口文件分析依賴關係，打包到./dist/main.js文件中
5、package.json裏配置腳本
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack --mode=development"
},
- 通過
--mode選項可以控制webpack的打包結果的運行環境, npm run dev打包後的dist文件夾的代碼本地開發環境上運行，npm run build打包後的dist文件夾的代碼在 生產/測試 服務器上運行，
6、webpack處理後，npm包支持在瀏覽器使用
import $ from "jquery"
console.log($);
import $ from "jquery"這個是不參與最終運行的，是交給webpack 來分析依賴關係用的- 雖然
jQuery 是commonjs 導出的，但是webpack處理後，可以用es6模塊標準引入，有了webpack 就不用擔心模塊化的兼容性問題了 - from “jquery” jquery前沒有./ 或…/，webpack就會去node_modules找對應的依賴文件，然後分析jquery的依賴，然後打包結果放到./dist/main.js裏,