2-4 (webapack4 loader) webpack文件处理(file-loader)之图片处理

一.图片处理
1）安装loader
下载安装file-loader，打开终端，进入到项目文件夹路径，输入命令cnpm install file-loader --save-dev
2）配置webpack.config.js文件
在webpack.config.js文件中的module中的rules里写入

{
	test:/\.(png|jpg|gif|jepg)$/,
	use:'file-loader'
},

webpack.config.js全部代码如下所示：

const path = require('path');


module.exports = {
	entry:'./public/index.js',
	output:{
		path:path.resolve(__dirname,'build'),
		filename:'bundle.js'
	},
	devServer:{
		contentBase:'./build',//设置服务器访问的基本目录,就是我们打包完成的目录
		host:'localhost',//服务器的IP地址
		port:8080,//端口号
		open:true,//自动打开页面
	},
	module:{
		rules:[
			{
				test:/\.scss$/,
				use:['style-loader','css-loader','sass-loader',{
					loader:'postcss-loader',
					options:{
						plugins:[
							require("autoprefixer")
						]
					}
				}]
			},
			{
				test:/\.(png|jpg|gif|jepg)$/,
				use:'file-loader'
			},
		]
	}
}

3）终端输入npm run dev进行打包
这样，在css文件中写入的图片样式在打包完成后就可以生效啦，会在build文件夹下生成一个图片文件。

你还可以配置options：
1）name：为你的文件配置自定义文件名模版（默认值：[hash].[ext]）
2）context:配置自定义文件的上下文，默认为webpack.config.js
3）publicPath：为你的文件配置自定义 public 发布目录
4）outputPath：为你的文件配置自定义 output 输出目录
注：
[ext]：资源扩展名
[name]：资源的名称
[path]：资源相对于context的路径
[hash]：内容的哈希值

具体使用方法：

{
				test:/\.(png|jpg|gif|jepg)$/,
				use:[{
					loader:'file-loader',
					options:{
						name:'[path]dudu.jpg',
					}
				}]
			},

其中，name指定了打包之后的图片名称叫什么，[path]是资源相对于context的路径，也就是说，目前我的路径是“public文件夹下的图片”，我打包之后就会在build文件夹下有一个public文件夹，里面有一个dudu.jpg文件。

context:配置自定义文件的上下文，默认为webpack.config.js，例如：

{
				test:/\.(png|jpg|gif|jepg)$/,
				use:[{
					loader:'file-loader',
					options:{
						name:'[path]dudu.jpg',
						context:'../',
					}
				}]
			},

这样的话，我就跳到了和项目同级的目录上，目前我的路径就是“项目下public文件夹下的图片”，我打包之后就会在build文件夹下发现一个项目文件夹，里面有一个public文件夹，里面有一个dudu.jpg文件。

publicPath可以为你的文件配置自定义 public 发布目录，它后面是一个地址，是你放图片的地址，定义了publicPath之后，就可以从这个地址中取到你想要的图片，比如：

{
				test:/\.(png|jpg|gif|jepg)$/,
				use:[{
					loader:'file-loader',
					options:{
						name:'[path]dudu.jpg',
						publicPath:'http://www.abc.com/img',
					}
				}]
			},

outputPath是为你的文件配置自定义 output 输出目录，也就是说，定义了output之后，就会在build文件夹下生成一个你定义的文件夹来存放图片，比如：

{
				test:/\.(png|jpg|gif|jepg)$/,
				use:[{
					loader:'file-loader',
					options:{
						name:'dudu.jpg',
						outputPath:'./img',
					}
				}]
			},

这样就会在build文件夹下生成一个img文件夹来存放dudu.jpg这张图片。

[hash]的用法，比如：

{
				test:/\.(png|jpg|gif|jepg)$/,
				use:[{
					loader:'file-loader',
					options:{
						name:'[hash]dudu.jpg',
						outputPath:'./img',
					}
				}]
			},

打包后，就会发现build文件夹下的img文件夹下的图片名称变成了哈希值+图片名.jpg

2-4 (webapack4 loader) webpack文件处理(file-loader)之图片处理

猜你喜欢