webpack四大核心配置
① entry：entry指定打包入口，可以是一個(gè)字符串，也可以是一個(gè)字符串?dāng)?shù)組，還可以是一個(gè)對(duì)象。
②output：指定出口文件位置
③plugins：引入插件
④module：用來指定loader的，loader實(shí)質(zhì)上是用來對(duì)我們的資源進(jìn)行預(yù)處理的工具，便于webpack將他們當(dāng)成模塊
什么是webpack？
webpack是一個(gè)模塊打包器（bundler）。
在webpack的概念中，前端的所有資源文件（js/css/json/img/sass/less/...）都會(huì)作為模塊來被處理，webpack會(huì)根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，生成對(duì)應(yīng)的靜態(tài)資源，最終打包部署上線。
webpack干的工作就如下圖所示：
我們先來了解下webpack需要的一些鋪墊性知識(shí)：
loader
webpack本身只能加載js/json模塊，如果要加載其它類型的文件/模塊, 就需要使用對(duì)應(yīng)的loader進(jìn)行轉(zhuǎn)化和加載。
loader 可以將所有類型的文件轉(zhuǎn)換為webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對(duì)它們進(jìn)行處理。
loader自身也是運(yùn)行在node.js環(huán)境中的JavaScript模塊，其本身是一個(gè)函數(shù)，接收源文件作為參數(shù)，返回轉(zhuǎn)化的結(jié)果。
loader一般以 xxx-loader 的方式命名，xxx代表了這個(gè)loader要做的轉(zhuǎn)化功能，比如：css-loader，json-loader等。
插件
loader 被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。
插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。插件接口功能極其強(qiáng)大，可以用來處理各種各樣的任務(wù)。
- 可以完成一些loader不能實(shí)現(xiàn)的功能；
- 使用插件一般在webpack的配置信息plugins選項(xiàng)中指定
- UglifyJSPlugin: 壓縮js文件
- HtmlWebpackPlugin: 自動(dòng)生成HTML文件
- CleanWebpackPlugin: 自動(dòng)清除指定文件夾資源
2.1 初始化項(xiàng)目
在工程的目錄結(jié)構(gòu)下，新建webpack_demo工程文件，并進(jìn)行初始化，如下所示：
-
安裝webpack （先安裝全局的webpack，后安裝局部webpack）
image -
項(xiàng)目初始化
image
image
2.2 打包項(xiàng)目中的js和json文件
（一）新建單個(gè)js文件，如下圖所示：
打開命令行執(zhí)行打包代碼：
打包成功后，你就可以引入bundle.js，其執(zhí)行效果和引入main.js一樣，在開發(fā)過程中，我們就可以把多個(gè)js文件都打包到bundle.js中，這樣客戶端請(qǐng)求資源就由多次變成一次。
運(yùn)行結(jié)果如下圖所示：
（二）新建多個(gè)js和json文件，如下圖所示：
新建多個(gè)js文件，并在main.js中引入并調(diào)用。
運(yùn)行結(jié)果：
新建多個(gè)json文件，并在main.js中引入并調(diào)用，如下圖所示：
運(yùn)行結(jié)果如下：
2.3 在webpack中使用配置文件
在 webpack 4 中，可以無須任何配置使用，然而大多數(shù)項(xiàng)目會(huì)需要很復(fù)雜的設(shè)置，所以 配置文件比在終端(terminal)中手動(dòng)輸入大量命令要高效的多。
新建 webpack.config.js 文件，寫入相關(guān)配置信息，在終端直接執(zhí)行webpack即可打包，如下圖所示：
2.4 打包項(xiàng)目中的CSS文件
首先安裝并添加 style-loader 和 css-loader 模塊：
然后進(jìn)入webpack.config.js中配置loader選項(xiàng)：
創(chuàng)建main.css文件，寫入樣式，并在main.js中引入，然后通過webpack命令打包，如下圖所示：
運(yùn)行結(jié)果如下：
2.5 打包項(xiàng)目中的圖片文件
首先安裝并添加 file-loader 模塊：
然后進(jìn)入webpack.config.js中配置loader選項(xiàng)：
引入圖片文件，在index.html中創(chuàng)建標(biāo)簽，在css文件中的樣式里面使用圖片背景，執(zhí)行webpack打包到bundle.js文件，如下圖所示：
運(yùn)行結(jié)果：
通過上面的操作，我們可以了解到，如果要加載其它的資源，只需要配置好相應(yīng)的loader，然后統(tǒng)一打包到bundle.js文件中運(yùn)行即可。
接下來，我們思考一個(gè)問題：在開發(fā)過程中，每增刪改某一塊內(nèi)容，都需要打包后才能正常運(yùn)行，那我們能不能做到修改好動(dòng)態(tài)打包運(yùn)行呢？此時(shí)，借助服務(wù)器可以幫助實(shí)現(xiàn)這一操作。
2.6 自動(dòng)編譯打包
webpack-dev-server 提供了一個(gè)簡單的 web 服務(wù)器，并且能夠?qū)崟r(shí)重新加載(live reloading)。
(一) 下載安裝
(二） 修改配置文件
在webpack.config.js告訴開發(fā)服務(wù)器(dev server)，在哪里查找文件：
以上配置告知 webpack-dev-server，在 localhost:8080 下建立服務(wù)，將 dist 目錄下的文件，作為可訪問文件。
(三） package配置
增加"start": "webpack-dev-server --open"選項(xiàng)。
(四）編譯打包應(yīng)用并運(yùn)行
npm start
當(dāng)功能開發(fā)完畢后，關(guān)掉服務(wù)器，執(zhí)行webpack打包成本地文件即可。
2.7 webpack中各種插件的使用
在webpack中插件有很多，都是基于解決某一方面功能而產(chǎn)生的。大部分插件使用方式相同，我們可以做到舉一反三。
（一） HtmlWebpackPlugin
該插件將為你生成一個(gè) HTML5 文件， 其中包括使用 script 標(biāo)簽的 body 中的所有 webpack 包。
安裝：
在項(xiàng)目中引入，進(jìn)入webpack.config.js文件中，增加如下配置：
刪除掉原先打包編譯生成的dist文件夾，重新執(zhí)行webpack，該插件會(huì)自動(dòng)根據(jù)指定的模板頁面幫助我們創(chuàng)建index.html文件，并做好相關(guān)配置引入，如下圖所示：
該篇轉(zhuǎn)載自旋之華公眾號(hào)https://mp.weixin.qq.com/s/kQUh4Mk3mOLQ1QhuiJM_jg
