webpack的使用(中)

前言：（承接webpack的使用(上)）在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错!通过loader(协助webpack进行打包)打包非js模块

loader

loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：less-loader 可以打包处理 less 相关的文件；sass-loader 可以打包处理 scss 相关的文件；url-loader可以打包处理 css中与rurl路径相关的文件

1、打包处理css文件

（1）运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader

 npm i style-loader css-loader -D

（2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下:

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）运行 npm i less-loader less -D 命令

npm i less-loader less -D 

（2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

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

3、打包处理scss文件

（1）运行 npm i sass-loader node-sass -D 命令

 npm i sass-loader node-sass -D

（2）在 webpack.config.js 的 module -> rules 数组中，添加 oader 规则如下

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

4、打包样式表中的图片和字体文件

（1）运行 npm i url-loader file-loader -D 命令

 npm i url-loader file-loader -D

（2）在 webpack.config.js 的 module -> rules 数组中，添加 Loader 规则如下
其中?之后的是 loader 的参数项；limit 用来指定图片的大小，单位是字节(byte)

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

注意：webpack5对url-loader已经废弃了，要用assert

5、打包处理js 文件中的高级语法

对于js高级语法，webpack打包回报错

（1）安装babel转换器相关的包: npm i babel-loader @babel/core @babel/runtime -D

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

（2）安装babel语法插件相关的包: 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）在项目根目录中，创建 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 数组中，添加 Loader 规则如下

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

exclude 为排除项，表示 babel-loader 不需要处理 node modules 中的 js 文件
注意：exclude这一项必须有，不然会报错
loader还有很多，可查看webpack官方API中的loader内容