3. `webpack`中的載入器
webpack是乙個流行的前端專案構建工具（打包工具），可以解決當前web開發中所面臨的困境。webpack提供了友好的模組化支援，以及**壓縮混淆、處理js相容問題、效能優化等強大的功能，從而讓程式設計師把工作的重心放到具體的功能實現上，提高了開發效率和專案的可維護性。
新建專案空白目錄，並執行npm init –y命令，初始化包管理配置檔案package.json新建src源**目錄
新建src -> index.html首頁
初始化首頁基本的結構
執行npm install jquery –s命令，安裝jquery通過模組化的形式，實現列表隔行變色效果
執行npm install webpack webpack-cli –d命令，安裝webpack相關的包
在專案根目錄中，建立名為webpack.config.js的webpack配置檔案
在webpack的配置檔案中，初始化如下基本配置：
module.exports =
package.json配置檔案中的scripts節點下，新增dev指令碼如下：
"scripts"
:
npm run dev命令，啟動webpack進行專案打包
webpack的 4.x 版本中預設約定：
如果要修改打包的入口與出口，可以在webpack.config.js中新增如下配置資訊：
const path =
require
('path');
// 匯入 node.js 中專門操作路徑的模組
module.exports =
}
npm install webpack-dev-server –d命令，安裝支援專案自動打包的工具
修改package.json -> scripts中的dev命令如下：
"scripts"
:
src -> index.html中，script指令碼的引用路徑，修改為"/buldle.js「執行npm run dev命令，重新進行打包
在瀏覽器中訪問http://localhost:8080位址，檢視自動打包效果
注意：
執行npm install html-webpack-plugin –d命令，安裝生成預覽頁面的外掛程式
修改webpack.config.js檔案頭部區域，新增如下配置資訊：
// 匯入生成預覽頁面的外掛程式，得到乙個建構函式
const htmlwebpackplugin =
require
('html-webpack-plugin'
)const htmlplugin =
newhtmlwebpackplugin()
;
webpack.config.js檔案中向外暴露的配置物件，新增如下配置節點：
module.exports =
// package.json中的配置
// --open 打包完成後自動開啟瀏覽器頁面
// --host 配置 ip 位址
// --port 配置埠
"scripts"
:,
webpack預設只能打包處理以.js字尾名結尾的模組，其他非.js字尾名結 尾的模組，webpack預設處理不了，需要呼叫loader載入器才可以正常打包，否則會報錯！
loader載入器可以協助webpack打包處理特定的檔案模組，比如：
執行npm i style-loader css-loader -d命令，安裝處理css 檔案的 loader在webpack.config.js的module -> rules陣列中，新增loader規則如下：
// 所有第三方檔案模組的匹配規則
module:
]}
test表示匹配的檔案型別，use表示對應要呼叫的loader，從後往前執行
注意：
執行npm i less-loader less -d命令
在webpack.config.js的module -> rules陣列中，新增loader規則如下：
// 所有第三方檔案模組的匹配規則
module:
]}
npm i sass-loader node-sass -d命令
在webpack.config.js的module -> rules陣列中，新增loader規則如下：
// 所有第三方檔案模組的匹配規則
module:
]}
npm i postcss-loader autoprefixer -d命令
在專案根目錄中建立postcss的配置檔案postcss.config.js，並初始化如下配置：
const autoprefixer =
require
('autoprefixer'
)// 匯入自動新增字首的外掛程式
module.exports =
webpack.config.js的module -> rules陣列中，修改css的loader規則如下：
module:
]}
npm i url-loader file-loader -d命令
在webpack.config.js的module -> rules陣列中，新增loader規則如下：
module:
]}
安裝babel語法外掛程式相關的包：npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –d在專案根目錄中，建立babel配置檔案babel.config.js並初始化基本配置如下：
module.exports =
;
webpack.config.js的module -> rules陣列中，新增loader規則如下：
// exclude 為排除項，表示 babel-loader 不需要處理 node_modules 中的 js 檔案
webpack學習記錄
邏輯多檔案多，專案的複雜度提高了。webpack可以翻譯 loader 可以加入外掛程式 plugin 為了防止某些變數被篡改，保護特定變數，可以使用下面寫法 閉包 閉包 乙個立刻執行函式 寫法一，在函式中進行掛載 funcion window window.susanmodule window 驗...
webpack學習記錄
以前的時候就使用過webpack，但都只是會使用基本的配置，優化方面的都沒有去了解一下，趁過年有休閒時間。對webpack常用的東西進行一次總結 分析。畢竟webpack這東西寫完又忘記，忘記又去學，不如自己寫一篇文章記錄下來。這裡只是記錄一下學習思路，以及學習的總結，並不會做深入詳細的說明。在開發...
webpack4 0配置記錄（1）
趁著假期閒暇，練習下webpack4.0的一些配置。let uglifyjsplugin require uglifyjs webpack plugin let optimizecssassetsplugin require optimize css assets webpack plugin op...