前言
1、什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。把各種游依賴關系的模塊 ，打包成瀏覽器能夠識別的文件，其思想就是萬物皆模塊，它能夠將各個模塊進行按需加載，不會導致加載了無用或者冗余的代碼，所以它還有一個名字叫前端模塊化打包工具。
2、webpack 有哪些功能? 為什么用webpack？
(代碼轉換 文件優化 代碼分割 模塊合並 自動刷新 代碼校驗 自動發布)。webpack可以使用webpack-dev-server本地開發，熱更新模塊化開發（import，require），打包后會干凈的。例如有10個js文件，只用5個，那么其他文件文件不會打包上線發布。
3、webpack4.0和webpack3.0區別？
增加mode屬性，可以是development或者production，設置打包環境，development可以獲得最好的開發體驗。
module.loader改為module.rules，module.loaders.loader改為module.loaders.use。
webpack4.0刪除合並了CommonsChunkPlugin插件，webpack會默認為你生成共享代碼模塊。
學習
首先學習webpack的前提是電腦里nodejs的基礎 ，如果沒有安裝node環境 請看我上篇隨便https://www.cnblogs.com/xym0996/p/11898523.html 官方網站進行安裝node, http://nodejs.cn/ 下載最新版node包並進行安裝。
1、安裝全局：
1 npm install webpack -g 2 npm install webpack-cli -g
2、查看版本：
1 webpack -version
3、創建項目：命名為web10的項目（進入項目目錄）
初始化項目：
1 npm init
生成package.json文件
4、安裝依賴包
1 npm i webpack -D 2 npm i webpack-cli -D
5、新建源碼目錄src src目錄里面建一個index.js的文件
6、打印 （隨便寫點代碼 作為測試）
7、打包 命令webpack，
1 webpack --mode=development 2 webpack --mode=production
web10項目會自動生成一個dist目錄
同時在dist目錄建立一個index.html的文件 在引入main.js
運行index.html f12控制台
可以看到自己打印出來的123已經在控制台中出現
缺點
到這一步webpack已經可以正常的使用了，但是它有一個缺點就是不能實時的動態更新，所以你每次修改了src的
代碼 都要webpack重新進行打包然后才能正常顯示你要的數據，而且還有一個缺點就是html文件需要自己手動建，而
不是自動建並且幫你引入js文件，所以下一篇隨筆會注入熱更新的html動態生成的插件及代碼。