webpack 是一種前端資源構建工具，一個靜態模塊打包器(module bundler)。在webpack 看來, 前端的所有資源文件(js/json/css/img/less/...)都會作為模塊處理。
它將根據模塊的依賴關系進行靜態分析，打包生成對應的靜態資源(bundle)。
當在 index.html 中引入 index.less 文件和 index.js 文件時，瀏覽器並不能解析
less 文件需要編譯成 css ，才能被瀏覽器識別，通過 import 語法引入的 jQuery 也不能被瀏覽器識別
index.js
index.less
因此，webpack 可以把這些都處理為瀏覽器能夠識別的，
webpack 能夠編譯打包 js 和 json文件，能夠將 es6 的模塊話語法轉換成瀏覽器能識別的語法，能壓縮代碼
index.js 入口文件中，加載相應的文件：
然后，初始化 package.json , npm init -y
下載並安裝 webpack ：本地安裝 npm install webpack webpack-cli -D
創建文件 webpack.config.js，webpack 的配置文件，當運行 npx webpack 指令時，會加載里面的配置，配置內容：
// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
module.exports = { //所有構建工具都是基於nodejs平台運行的~模塊化默認采用commonjs
entry: './src/index.js', // 入口起點
output: { // 輸出
filename: 'bundle.js', // 輸出文件名
path: resolve(__dirname, 'build') // 輸出路徑 , __dirname nodejs的變量，代表當前文件的目錄絕對路徑， https://juejin.im/post/5cb341596fb9a068553e1818
},
module: { // loader的配置 , 不同文件必須配置不同loader處理
rules: [
{
test: /\.css$/, // 匹配哪些文件
use: [ // 使用哪些loader進行處理, use數組中loader執行順序：從右到左，從下到上 依次執行
'style-loader', //創建style標簽，將js中的樣式資源插入進行，添加到head中生效
'css-loader' // 將css文件變成commonjs模塊加載js中，里面內容是樣式字符串
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader' // 將less文件編譯成css文件 , 需要下載 less-loader和less
]
}
]
},
mode: 'development', // 開發模式
}
運行指令：npx webpack
這樣，就將 index.js 及其依賴項都打包成一個 bundle.js 文件
在 index.html 文件中引入 bundle.js，瀏覽器成功識別了
webpack 根據 index.js 找到所有的依賴項，
將 index.less，先通過 less-loader 將 less 文件編譯成 css文件，接着通過 css-loader 將 css文件變成 CommonJS 模塊加載到 js中，里面內容是樣式字符串，最后使用 style-loader ，創建 style 標簽，將 js 中的樣式資源插入進去，添加到 head 中生效，
同時 也將 es6 模塊化語法加載的 jQuery，也處理為瀏覽器能夠識別的語法
入口（entry）：
入口起點，指示 webpack 應該使用哪個模塊，來作為構造其內部依賴圖的開始，進入入口起點后，webpack會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
可以通過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點），默認為 ./src
單個入口（簡寫）語法：
entry : ' ./src/index.js ' （簡寫）
entry : {
main : ' ./src/index.js '
}
對象語法：
entry : {
app : ' ./src/app.js ' ，
test : ' . /src/test.js '
}
出口（output）：
output 屬性告訴 webpack 在哪里輸出它所創建的 bundles，以及如何命名這些文件，默認為 ./dist
注意，即使可以存在多個 入口起點，但是只指定一個輸出配置。
webpack 中 配置 output 屬性的最低要求是，將它的值設置為一個對象，包括以下兩點：
filename：用於輸出文件的文件名
目標輸出目錄 path 的絕對路徑
如果配置創建了多個單獨的 chunk，例如，使用多個入口起點或使用像 CommonsChunkPlugin 這樣的插件，則應該使用占位符來確保每個文件具有唯一的名臣稱。
entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } } // 寫入到硬盤：./dist/app.js, ./dist/search.js
loader：
loader 用於對模塊的源代碼進行轉換，loader 可以使你在 import 或 “加載” 模塊時預處理文件。因此，loader 類似於其他構建工具中的 "任務（task）"，並提供了處理前端構建步驟的強大方法。
loader 讓 webpack 能夠去處理 非 js 文件，如 Typescript（webpack 自身只理解 js ），l或將內聯圖像轉換為 data URL 。 loader 甚至允許你直接在 JavaScript 模塊中 import CSS 文件 ！loader 可以將所有類型的文件轉換成 webpack 能夠處理的有效模塊，然后就可以利用 webpack 的打包能力，對它們進行處理。
使用 loader 三種方式：
配置：在 webpack.config.js 文件中指定 loader（推薦）
內聯：在每個 import 語句中或任何等效於“ import ” 的方式中 顯示指定 loader，使用 ! 將資源中的 loader 分開，分開的每個部分都相當於當前目錄解析。
import Styles from 'style-loader!css-loader?modules!./styles.css';
CLI：在 shell 命令中指定它們
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
這會對 .jade 文件使用 jade-loader，對 .css 文件使用 style-loader 和 css-loader
在更高層面，在 webpack 的配置中 loader 有兩個目標：
test 屬性：用戶標識出應該被對應的 loader 進行轉換的 某個或某些文件（匹配什么文件）
use 屬性：表示進行轉換時，應該使用哪個 loader
插件（plugins）：
loader 被用於轉換某些類型的模塊，而插件則可以用於執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量，插件接口功能極其強大，可以用來處理各種各樣的任務。
插件目的在於解決 loader 無法實現的其他事情。
使用一個插件，只需要 require() 它，然后把它添加到 plugins 數組中，多數插件可以通過選項 option 自定義，也可以在一個配置文件中因為不同目的而多次使用同一個插件，此時需要通過使用 new 操作符來創建一個它的實例。
模式（mode）：
通過選擇 development 或 production ，來設置 mode，可以啟用相應模式下的 webpack 內置的優化。
用法：只在配置中提供 mode 選項，或者 從 CLI 參數中傳遞 webpack --mode=production
模塊（modules）：
webpack模塊：對於 Node.js 模塊，webpack 模塊能夠以各種方式表達它們的依賴關系，如：
① ES2015 import 語句
② CommonJS require90 語句
③ AMD define 和 require 語句
④ css/sass/less 文件中的 @import 語句
⑤ 樣式 url(......) 或 HTML 文件 <img src="......" /> 中的圖片鏈接 image url
配置（configuration）：
webpack 的配置文件，是導出一個對象的 JavaScript 文件，因為 webpack 配置是標准的 Node.js CommonJS模塊，你可以做到以下事情：①通過 require(... ) 導入其他文件
②通過 require(... ) 使用 npm 的工具函數
③使用JavaScript 的控制流表達式，例如 ? : 操作符
④對常用值使用常量或變量
⑤編寫並執行函數來生成部分配置