前言：（承接webpack的使用(上)）在實(shí)際開發(fā)過(guò)程中，webpack 默認(rèn)只能打包處理以 .js 后綴名結(jié)尾的模塊，其他非 js 后綴名結(jié)尾的模塊，webpack 默認(rèn)處理不了，需要調(diào)用 loader 加載器才可以正常打包，否則會(huì)報(bào)錯(cuò)!通過(guò)loader(協(xié)助webpack進(jìn)行打包)打包非js模塊

loader

loader 加載器可以協(xié)助 webpack 打包處理特定的文件模塊，比如：less-loader 可以打包處理 less 相關(guān)的文件；sass-loader 可以打包處理 scss 相關(guān)的文件；url-loader可以打包處理 css中與rurl路徑相關(guān)的文件

1、打包處理css文件

（1）運(yùn)行 npm i style-loader css-loader -D 命令，安裝處理 css 文件的 loader

 npm i style-loader css-loader -D

（2）在 webpack.config.js 的 module -> rules 數(shù)組中，添加 loader 規(guī)則如下:

const path=require('path')
const HtmlWebpackPlugin=require("html-webpack-plugin")
const htmlePlguin=new HtmlWebpackPlugin({template:'./src/index.html',filename: 'index.html'
})
module.exports={// 編譯模式mode:'development', //development productionentry: path.join(__dirname,'./src/index.js'), //打包入口文件路徑output:{path: path.join(__dirname,'./dist'), //輸出文件的存放路徑filename:'bundle.js' //輸出文件的名稱},devServer: {static:{directory:path.join(__dirname,"/")}},module:{rules:[{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},]},plugins:[htmlePlguin]
}

2、打包處理less文件

（1）運(yùn)行 npm i less-loader less -D 命令

npm i less-loader less -D 

（2）在 webpack.config.js 的 module -> rules 數(shù)組中，添加 loader 規(guī)則如下

   module:{rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader']},]}

3、打包處理scss文件

（1）運(yùn)行 npm i sass-loader node-sass -D 命令

 npm i sass-loader node-sass -D

（2）在 webpack.config.js 的 module -> rules 數(shù)組中，添加 oader 規(guī)則如下

   module:{rules:[{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},]}

4、打包樣式表中的圖片和字體文件

（1）運(yùn)行 npm i url-loader file-loader -D 命令

 npm i url-loader file-loader -D

（2）在 webpack.config.js 的 module -> rules 數(shù)組中，添加 Loader 規(guī)則如下
其中?之后的是 loader 的參數(shù)項(xiàng)；limit 用來(lái)指定圖片的大小，單位是字節(jié)(byte)

   module:{rules:[{test:/\jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=216508' }]}

注意：webpack5對(duì)url-loader已經(jīng)廢棄了，要用assert

5、打包處理js 文件中的高級(jí)語(yǔ)法

對(duì)于js高級(jí)語(yǔ)法，webpack打包回報(bào)錯(cuò)

（1）安裝babel轉(zhuǎn)換器相關(guān)的包: npm i babel-loader @babel/core @babel/runtime -D

npm i babel-loader @babel/core @babel/runtime -D

（2）安裝babel語(yǔ)法插件相關(guān)的包: npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

（3）在項(xiàng)目根目錄中，創(chuàng)建 babel 配置文件 babel.config.js 并初始化基本配置如下

module.exports={
presets: ['@babel/preset-env' ],
plugins:['@babel/plugin-transform-runtime'，@babel/plugin-proposal-
class-properties' ]
}

（4）在webpack.config.js 的 module -> rules 數(shù)組中，添加 Loader 規(guī)則如下

{ test: /\.jss/，use: babel-lorder',exclude: /node modules/ }

exclude 為排除項(xiàng)，表示 babel-loader 不需要處理 node modules 中的 js 文件
注意：exclude這一項(xiàng)必須有，不然會(huì)報(bào)錯(cuò)
loader還有很多，可查看webpack官方API中的loader內(nèi)容