（1）打包后的文件分析
首先將打包后的文件進行適當刪減，Ctrl+Shift+L可以同時選中所有相同結構內容
結構如下
(function(modules){
...
})(
{
...
}
)
分析可知本質為匿名函數即IIFE函數，執行時會傳入后面函數執行符里的對象，接下來分析下傳入對象
對象構成：
key指的是當前模塊路徑
value指的是匿名函數
然后將對象傳入IIFE的modules參數
接下來分析下webpack啟動函數即IIFE函數
接下來開始配置函數，實現require方法，因為require默認不能在瀏覽器運行，方法如下所示
接下來看下方法什么時候被調用？
該方法會調用index.js入口模塊，名字傳入后，便變成了參數moduleId
接着分析函數內部
（2）配置文件更改名字+腳本script配置，命令打包
如果配置文件更改名字，則在打包時，可以通過--config來指定打包文件
如果我們想快速通過類似npm start指令快速打包，則可以配置package.json項目說明文件
通過命令打包
npm run build
此外，通過命令打包也可以動態傳參，如下所示
這里注意：需要加兩次-- --，因為只加一個--時，webpack不會將其識別為參數，--后面加動態參數--config webpack.conf.js
如果想加上進度條，則可以添加--progress，如下所示
（3）HTML插件+指令預覽npm run dev
目前雖然打包出來了js文件，且可以在index.html引入使用，如下所示
但此時需要手動打開，且協議為file文件協議
日常開發，更希望以服務器方式打開運行訪問。此時便需要起一個服務，webpack內置了一個開發服務，通過express搭建，從而實現靜態服務(類似於live-server)。
首先安裝開發依賴，如下所示
npm i webpack-dev-server -D
下載完成后打包運行，指令如下
npx webpack-dev-server
好處，並不會真實去打包文件，只是生成了所謂的內存中的打包，可以將文件寫入內存里。接下來訪問localhost:8080端口，如下所示
會以當前項目為主，展示文檔結構，點進dist后，便可查看到index.html內容。
接下來通過指令啟動服務預覽，如下所示
接下來通過指令啟動
當然，也可以自定義如下，接下來進行開發服務器配置。
或者如下所示
webpack-dev-server
--port 3333 端口號
--content-base ./dist --progress 默認打開目錄
--open 瀏覽器自動打開
此時便可以直接訪問loaclhost:3333端口，如下所示
或者如下所示，直接在配置文件配置
但此時還有問題，即這里的index.html是我們手動創建的，所以接下來接着配置，自動創建html文件。這里便需要借助插件html-webpack-plugin.
首先安裝依賴，如下所示
>npm i html-webpack-plugin -D
新建模板文件src/index.html
然后在配置文件引入使用
接下來進行打包輸出，如下所示
查看生成的index.html文件
當代碼部署上線時，需要更改mode模式，改為生產模式，進行代碼壓縮。如下所示
此時查看打包輸出文件bundle.js，如下所示，已經進行了壓縮丑化
但此時html文件仍然未被壓縮，所以接下來進行相關配置，壓縮html文件。
1、首先刪除html文件里的雙引號
2、將代碼合並為一行，即折行操作
index.html如下所示，可以分步驟進行測試（content屬性里有逗號，所以沒有去掉雙引號）
打包后如下所示
此外，也可以給bundle.js添加hash值，每次生成新文件，避免覆蓋之前文件，如下所示
打包后文件如下所示
此時打包便會生成新文件，防止文件覆蓋帶來的緩存問題
接下來開始其他配置，例如如何支持CSS模塊、JS模塊的轉換、圖片、各項的優化等
（3）樣式處理
為了調試方便，我們接着把mode形式改為development開發模式
目前webpack配置文件大致如下
1、分析
正如之前所介紹，webpack默認只支持js模塊
首先新建src/index.css樣式文件，坐下測試
然后在源文件src目錄下的靜態木板文件引入
接下來打包輸出測試下
此時發現index.css並沒有完成打包，所以不能直接引入CSS樣式文件.
接下來我們希望將css文件變成模塊引入，然后再進行打包，如下所示
接下來進行打包，如下所示
翻譯如下：
當前需要合適的loader去解析文件.而loader的作用便是將源代碼進行轉化，接下來編寫配置模塊module
如下所示，首先編寫靜態文件demo.css並引入
然后入口文件引入
接着配置文件
注意： 1、多個loader需要用[] 2、css-loader作用是接續@import語法，即連接css文件之間的引用 3、style-loader作用是將css代碼插入到head標簽里 4、loader特點：作用單一性 5、loader執行順序，默認從右到左執行，從下到上執行 6、loader可以寫成對象格式，以便加入option參數
測試如下
例如在模板文件里將style合並為一個
（5）處理Less文件
為了方便測試，首先在模板html插入點內容
然后開始編寫less文件
然后在入口文件引入
接着編寫配置文件
注意：
因為webpack的module模塊的rules規則匹配是從下到上、從右到左，所以需要在最底部加個less-loader
同樣，除了less，還有sass（安裝node-sass、sass-loader）、stylus（stylus、stylus-loader）等預處理器。接下來安裝less-loader依賴
npm install --save-dev less-loader less
接着打包文件，然后進行預覽測試，如下所示
（6）樣式處理升級--抽離CSS樣式
目前為止，樣式都是放在style標簽里，樣式過多容易造成阻塞，所以我們將css抽離出去，用link標簽引入。這里便需要用到第三方插件mini-css-extract-plugin
npm i mini-css-extract-plugin -D（譯為：提取最小單位css插件）
接着將style-loader配置改為MiniCssExtractPlugin.loader
接下來進行打包測試
打包完成后發現目錄下多出main.css文件，此時樣式文件便已經抽離出來
（7）css屬性--自動加瀏覽器兼容前綴
如下所示，我們給h2添加旋轉屬性
接下來打包預覽，雖然可以正常使用，但瀏覽器沒有加兼容前綴
如果想自定添加瀏覽器前綴，需要涉及到第三方依賴“autoprefixer”譯為“自動前綴”，但該依賴需要結合loader使用，所以還需要添加postcss--loader依賴.
npm i autoprefixer postcss-loader -D
下載完成后首先配置loader，即postcss-loader，因為是在解析css前添加前綴，所以我們將該loader調用放到css-loadder之前，如下所示
接下來進行打包測試
缺少配置文件，所以接下來在根目錄下新建對應的配置文件postcss.config.js
這里注意：
require()()后跟的參數限制瀏覽器版本，除了在這里限制，也可以直接在package.json里限制
此時再次打包查看，審查打包后的css文件，發現此時前綴添加成功
（8）優化壓縮css打包的文件
如果想優化壓縮打包后的css文件，需要用到mini-css-extract-plugin，搜索npm.js官網，查看具體用法
文檔表明，需要添加優化項optimization，在里面配置壓縮。默認情況下調用TerserJSPlugin，壓縮JS代碼。而OptimizeCSSAssetsPlugin為壓縮css.
首先下載optimize-css-assets-webpack-plugin依賴
npm i optimize-css-assets-webpack-plugin terser-webpack-plugin -D
此時再次打包，結果如下，此時css和js均已打包壓縮
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}