webpack中关于Loader插件的使用

webpack中Loader插件的使用

webpack识别不了除js文件以外的资源文件，这个时候我们就要用到Loader来帮忙打包。

​ file-loader的配置

//打开webpack.config.js文件
const path = require('path');

module.exports = {
	mode:'production',
	entry:{
		main:'./src/index.js'
	},
	mudule:{
		rules:[
			{
				//符合.jpg文件，那么我们就交给file-loader来处理
				test:/\.jpg$/,
				use:{
					loader:'file-loader' //前提我们要下载file-loader插件
				}
			},
			{
				//符合.txt文件，那么我们就交给file-loader来处理
				test:/\.txt$/,
				use:{
					loader:'file-loader' //前提我们要下载file-loader插件
				}
			},
		]
	},
	output:{
		filename:'bundle.js',
		path:path.resolve(_dirname,'dist')
	}
}

​ 如果我们想要file-loader文件打包出来的文件不改变名字该怎么做？

//打开webpack.config.js文件
mudule:{
		rules:[
			{
				//符合.jpg/png/gif文件，那么我们就交给file-loader来处理
				test:/\.(jpg|png|gif)$/,
				use:{
					loader:'file-loader', //前提我们要下载file-loader插件
					options:{
						//占位符 placeholder
						name:'[name].[ext]'
					}
				}
			},
			{
				//符合.txt文件，那么我们就交给file-loader来处理
				test:/\.txt$/,
				use:{
					loader:'file-loader', //前提我们要下载file-loader插件
					options:{
						//占位符 placeholder
						name:'[name].[ext]'
					}
				}
			},
		]
	},

​ 修改打包出文件的路径？

//打开webpack.config.js文件
mudule:{
		rules:[
			{
				//符合.jpg/png/gif文件，那么我们就交给file-loader来处理
				test:/\.(jpg|png|gif)$/,
				use:{
					loader:'file-loader', //前提我们要下载file-loader插件
					options:{
						//占位符 placeholder
						name:'[name].[ext]',
						//生成的图片在dist文件夹下的images文件夹下
						outputPath:'images/'
					}
				}
			},
		]
	},

更详细配置请看官网：webpack.js.org/concepts/lo…