（1）ES6語法解析轉換ES5
為了方便測試，我們先將mode模式改為開發模式development，首先編寫ES6語法進行相關測試
然后打包測試，發現打包后的js文件仍舊是ES6語法
接下來安裝相關依賴
npm i babel-loader @babel/core @babel/preset-env -D
相關依賴的功能作用如下
babel-loader 轉換j加載器 @babel/core 為babel的核心模塊 @babel/preser-env 轉換依據，將ES6轉為ES5
接下來開始配置
接下來打包測試，如下所示，此時ES6的語法let、const、arrow-function箭頭函數等，統統轉為了ES5語法
當然還有高級語法，例如Class（ES7寫法）
此時打包如下
下載相關依賴，然后進行配置
npm i @babel/plugin-proposal-class-properties -D
注意：
@babel/plugin-proposal-class-properties 用於解析class語法(react必選)
所以配置如下
此時打包輸出測試
（2）添加js語法校驗
主要通過ESLint實現，首先安裝依賴
>npm i eslint-loader eslint -D
因為loader默認匹配是從右到左、自下而下，所以這里添加enforce強制執行順序在js打包解析之前進行語法校驗
最后打包測試npm run build，如下所示，出現語法提示，說明校驗設置成功
如果不用則注釋即可
（3）全局變量引入問題
接下來介紹下webpack里第三方模塊的使用，例如jquery
>npm i jquery
某些第三方模塊依賴於jquery，或者window.jquery，那么處理如下，首先編寫入口文件
接着打包測試如下
webpack或者node在外部都會封裝閉包函數，此時的$並不會掛到window上，如下所示
此時我們希望變量$可以暴露給window，此時可以使用內聯loader，通過expose-loader暴露全局的loader。loader類型如下
pre 前面執行的loader
normal 普通的loader
expose 內聯loadeer
post后置loader
內聯loader值得是可以直接在代碼里使用，如下所示
測試如下
除了使用內斂loader，還可以在配置文件使用
情況3：如果我們不希望手動引入jquery，而是默認引入，即在每個模塊里注入$對象
這里便需要用到webpack插件，如下所示
因為我們沒有引用jquery，所以將之前的內置loader注釋掉
接着配置插件webpack.ProvidePlugin譯為：提供插入
接下來打包測試下
.
.