在實際開發過程中，webpack 預設只能打包處理以.js 字尾名結尾的模組，其他非.js 字尾名結
尾的模組，webpack預設處理不，需要呼叫loader載入器才可以正常打包，否則會報錯!
loader載入器可以協助webpack打包處理特定的檔案模組，比如:
1.打包處理css檔案
①執行npm i style-loader css-loader -d命令，安裝處理css檔案的loader
②在webpack.config.js的module -> rules 陣列中,新增loader 規則如下:
//所有第三方檔案模組的匹配規則
module: ]}
注意:2.打包處理less檔案
①執行 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 sass-loader node-sass -d命令 安裝出錯，
使用cnpm執行安裝，安裝成功
cnpm i sass-loader node-sass -d
4.配置postcss自動新增css的相容字首
①執行 npm i postcss-loader autoprefixer -d命令
②在專案根目錄中建立 postcss的配置檔案postcss.config.js,並初始化如下配置:
const autoprefixer = require('autoprefixer') //匯入自動新增字首的外掛程式
module.exports =
module:
]}
①執行npm i url-loader file-loader -d令
②在 webpack.config.js的module -> rules 陣列中，新增loader 規則如下:
module: ]}
limit用來指定的大小，單位是位元組(byte),只有小於limit大小的，才會被轉為base64 。
base64格式能夠讓在載入期間速度更快一些
6.打包處理js檔案中的高階語法
注意：使用npm安裝使用出現問題時，可以換成cnpm來安裝
①安裝babe1轉換器相關的包: npm i babel-loader @babel/core @babel/runtime -d
②安裝babe1語法外掛程式相關的包: npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -d
③在專案根目錄中， 建立babel配置檔案babel.config.js並初始化基本配置如下:
module.exports=// exclude 為排除項，表示babel-loader不需要處理node_modules 中的js檔案
webpack和webpack中載入器的基本使用
1 執行 npm install webpack webpack cli d 命令，安裝webpack 相關的包 2 在專案根目錄中，建立名為webpack.config.js 的 webpack 配置檔案 3 在 webpack 的配置檔案中，初始化如下基本配置 module.exports 4 ...
webpack中的載入器使用
在實際開發過程中，webpack預設只能打包處理以.js字尾名結尾的模組。其他非.js字尾名結尾的模組，webpack預設是處理不了的，這時候需要呼叫loader載入器才可以正常打包，否則會報錯。1 打包處理css檔案 1 執行npm i style loader css loader d命令，安裝...
webpack無法熱載入（ webpack
最近本地開發專案 一直無法熱載入，於是就抽空想辦法解決 我們線上的位址是 其實ai admin是線上的乙個目錄 但是公司前端專案較多，不可能用多個網域名稱，無法記住，都是用這種目錄的方式來管理的，具體的解決辦法如下 修改 dev client.js中的這行 就行，修改path為你對應的網域名稱就行 ...