webpack之常见的loader使用（三）

1.file-loader

npm install file-loader -D

主要用来加载静态文件，例如.txt .md .png .word .pdf等等。原理是把打包入口识别的资源模块，移动至输出目录，并返回一个地址名称

module: {
	rules: [{
		test: /\.(png|jpe?g|gif)$/,
		//use使⽤⼀个loader可以⽤对象，字符串，两个loader需要⽤数组
		use: {
			loader: "file-loader",
			// options额外的配置，⽐如资源名称
			options: {
				// placeholder 占位符包括 [ext]、[name]、[hash]等等
				// https://webpack.js.org/loaders/file-loader#placeholders
				name: "[name]_[hash].[ext]",

				 //options里边还可以用函数
				name (file) {
					if (env === 'development') {
						return '[path][name].[ext]'
					}
					
					return '[hash].[ext]'
				},
				//打包后的存放位置
				outputPath: "images/"
			}
		}
	}]
},

2.url-loader

npm install --save-dev url-loader

url-loader 是file-loader的加强版，可以处理file-loader的所有事情，还能将较小的图片模块转换为base64，直接打包到js文件中。

module: {
	rules: [{
		test: /\.(png|jpe?g|gif)$/,
		use: {
			loader: "url-loader",
			options: {
				name: "[name]_[hash].[ext]",
				outputPath: "images/",
				//⼩于2048，才转换成base64，单位是byte
				limit: 2048 
			}
		}
	}]
},

3.css相关的loader

npm install style-loader css-loader less less-loader -D

上边安装的loader是用来加载和转换css文件，或者.less文件

module: {
	rules: [{
       test: /\.css$/,
       include: path.resolve(__dirname, "./src"), // 推荐使用,在哪里查找文件
       // exclude:path.resolve(__dirname,"./node_modules"), // 排除哪里的文件

	   // loader有顺序，从右到左，从下到上
       use: ['style-loader','css-loader']
	},
	{
       test: /\.less$/,
       include: path.resolve(__dirname, "./src"), // 推荐使用,在哪里查找文件
       // exclude:path.resolve(__dirname,"./node_modules"), // 排除哪里的文件

	   // loader有顺序，从右到左，从下到上
       use: [
       'style-loader',
       'css-loader',
       'less-loader'
	}]
},

4.postcss-loader

npm i -D postcss-loader

postcss-loader可以给css样式，自动添加前缀，以适应各浏览器

module: {
	rules: [{
		test: /\.(png|jpe?g|gif)$/,
		use: ['style-loader','css-loader',{
		  loader: 'postcss-loader',
		  options: {
		    config: {
		      path: 'postcss.config.js' //这个可以修改postcss.config.js的路径，不填写默认是根目录的postcss.config.js
		    }
		  }
		}]
	}]
},

//postcss.config.js
module.exports = {
 plugins: [
	 require("autoprefixer")({
	 	overrideBrowserslist: ["last 2 versions", ">1%"] //支持浏览器最新的两个版本，所有市场份额大于1%的浏览器，都要进行处理
	 })
 ]
}

5.Babel处理ES6

npm i babel-loader @babel/core @babel/preset-env @babel/polyfill -D

babel-loader是webpack与babel的通信桥梁，不会做把es6
转换成es5的工作，这部分工作需要用到@babel/preset-env。@babel/preset-env包含了es6、7、8转换为es5的规则

{
	test: /\.js$/,
	exclude: /node_modules/,
	use: {
		loader: "babel-loader",
		options: {
			presets: [
				[
					"@babel/preset-env",
					{
						targets: {
							edge: "17",
							firefox: "60",
							chrome: "67",
							safari: "11.1"
						},
						corejs: 2,//新版本需要指定核⼼库版本
						useBuiltIns: "entry"//按需注⼊
					}
				]
			]
		}
	}
}

// 也可以将这里的options单独写在.babelrc文件中
//.babelrc
{
	presets: [
		[
			"@babel/preset-env",
			{
				targets: {
					edge: "17",
					firefox: "60",
					chrome: "67",
					safari: "11.1"
				},
				corejs: 2, //新版本需要指定核⼼库版本
				useBuiltIns: "usage" //按需注⼊
			}
		]
	]
}