Webpack通过loader打包非js模块

在实际开发过程中，webpack默认只能打包处理.js文件，非,js文件，需要调用loader加载器才可以正常打包。

loader加载器可以协助webpack打包处理特定文件模块

– css文件打包处理

1. 运行npm i style-loader css-loader -D,安装相关插件。
2. 在webpack.config.js文件中module中rules数组中，添加如下配置：

module.exports={
	module:{//所有第三方文件模板的匹配规则
		rules:[
			//打包处理css文件
			{test:/\.css$/,use:['style-loader','css-loader']},
		]
	}
}

test -->配置的文件类型
use–>调用的loader

• use数组中指定loader顺序是固定的
• 调用顺序是从后往前调用

---

– scss文件打包处理

1. 运行npm i sass-loader node-sass -D,安装相关插件。
2. 在webpack.config.js文件中module中rules数组中，添加如下配置：

module.exports={
	module:{//所有第三方文件模板的匹配规则
		rules:[
			//打包处理scss文件
			{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
		]
	}
}

---

– less文件打包处理

1. 运行npm i less-loader less -D,安装相关插件。
2. 在webpack.config.js文件中module中rules数组中，添加如下配置：

module.exports={
	module:{//所有第三方文件模板的匹配规则
		rules:[
			//打包处理less文件
			{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
		]
	}
}

---

– 自动添加css浏览器兼容前缀

1. 运行npm i postcss-loader autoprefixer -D,安装相关插件。
2. 在根目录中创建postcss配置文件postcss.config.js

const autoprefixer=require('autoprefixer')//导入添加兼容前缀的插件

module.exports={
  plugins:[autoprefixer]//挂在插件
}

3. 在webpack.config.js文件中module中rules数组中，添加如下配置：

module.exports={
	module:{//所有第三方文件模板的匹配规则
		rules:[
			//处理添加css文件中兼容前缀
			{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
		]
	}
}

如果配置过css文件打包配置，直接在其后面添加‘postcss-loader’

---

– 配置打包样式表中的图片和字体文字

在css中background-image: url(‘路径’);，打包时会报错。所以需要以下配置。

1. 运行npm i url-loader file-loader -D,安装相关插件。
2. 在webpack.config.js文件中module中rules数组中，添加如下配置：

module.exports={
	module:{//所有第三方文件模板的匹配规则
		rules:[
			//打包样式表中图片文字文件
			{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=19342'},
		]
	}
}

?之后是loader的参数项，limit 用来指定图片大小，单位字节（byte）。只有小于linit的图片才会白转为base64格式

---

– 打包js文件中高级语法

1. 运行npm i babel-losder @babel/core @babel/runtime –D -D,安装转换器相关的包。
2. 运行npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D，安装babel语法插件相关的包
3. 在根目录中创建babel配置文件babel.config.js

module.exports = {
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
————————————————
版权声明：本文为优快云博主「can of love」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40666120/article/details/106164598

3. 在webpack.config.js文件中module中rules数组中，添加如下配置：

module.exports={
	module:{//所有第三方文件模板的匹配规则
		rules:[
			//配置js高级语法
			{test: /\.js$/,use: 'babel-loader',exclude:/node_modules/}
		]
	},
}

exclude:排除/node_modules/中的.js文件

---

– vue单文件组件加载器

在项目中组件的运用是很多的，如果都将组件写入一个文件中，不太现实，所以需要.vue单文件组件，来便捷组件的开发与运用。

1. 运行npm i vue-loader vue-template-compiler -D,安装相关插件。
2. 在webpack.config.js文件中module中rules数组中，添加如下配置：

const VueLoaderPlugin=require('vue-loader/lib/plugin')//导入插件

module.exports={
	module:{//所有第三方文件模板的匹配规则
		rules:[
			//加载打包vue文件规则
			{test:/\.vue$/,loader:'vue-loader'}
		]
	},
	//plugin数组->webpack打包用到的插件
	plugins:[htmlPlugin,new VueLoaderPlugin()],
}