loader0、loader简介和载入方式

什么是loader

webpack只能处理javaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换。loader是webpack种的一个重要概念，它是指用来将一段代码转换成另一端代码的webpack加载器。

配置loader

let path = require('path');

module.exports = {
    mode:'development',
	entry:'./src/index.js',
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist')
	},
	module:{
		rules:[
			{
				test:/\.js$/,
				use:'loader1'
			}
		]
	}
}

显然，上面的loader1是无法找到的，那么我们需要让配置文件能够找到这个loader1，有如下几种方法。

loader的载入方式

1. 指定loader的绝对路径

let path = require('path');

module.exports = {
	mode:'development',
	entry:'./src/index.js',
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist')
	},
	module:{
		rules:[
			{
				test:/\.js$/,
				use:path.resolve(__dirname,'loaders','loader1.js')//找到这个loader的绝对路径
			}
		]
	}
}

2. resolveLoader的别名alias方式

let path = require('path');

module.exports = {
	mode:'development',
	entry:'./src/index.js',
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist')
	},
	resolveLoader:{
		alias:{
			loader1:path.resolve(__dirname,'loaders','loader1.js')
		}
	}
	module:{
		rules:[
			{
				test:/\.js$/,
				use:'loader1'
			}
		]
	}
}

3. resolveLoader的自动查找loader路径方式

let path = require('path');

module.exports = {
	mode:'development',
	entry:'./src/index.js',
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist')
	},
	resolveLoader:{
		modules:['node_modules',path.resolve(__dirname,'loaders')]//先在node_modules文件夹下查找，找不到就去后面的loaders路径下查找
	}
	module:{
		rules:[
			{
				test:/\.js$/,
				use:'loader1'
			}
		]
	}
}