webpack常见的loader及其使用

file-loader打包图片

对小型图片问价进行配置，配置完后再dist生成一串hash值命名的图片。如果想让生成的图片使用原来的名字，就使用[name].[ext] （name表示原始名称，ext表示原始后缀格式），或可以在名称后添加hash。如果想将图片放置在dist的images文件夹下，就使用 outputPath:‘images/’。

const path = require('path');
module.exports = {
	entry:{
		main: './src/main.js',
	},
	output:{
		path.resolve(__dirname, 'dist') 
		filename: 'bundle.js' 
	},
	// 配置loader
	module:{
		rules:[
			test: '/\.(jpg|png|gif)$/',
			use:{
				loader: 'file-loader',
				options:{
					name:'[name]_[hash].[ext]',
					outputPath:'images/' // 输出文件夹
				}
			}
		]
	}
}

url-loader打包图片

url-loader 和 file-loader 比较像，只不过多了limit项。图片小于这个limit时会将图片做成一个base64的一个字符串，然后打包到bundle.js里面去；大于limit时 和file-loader操作一样！

使用url-loader打包图片的好处： 在dist目录下少了.jgp等格式的图片，减少了图片的请求次数；
坏处：使用 bundle.js base64这样的方式，遇到图片比较大的情况，bundle.js会变大，加载速度也会变慢，页面的加载时间也会变长

所以大图使用file-loader，小图使用url-loader

const path = require('path');
module.exports = {
	entry:{
		main: './src/main.js',
	},
	output:{
		path.resolve(__dirname, 'dist') 
		filename: 'bundle.js' 
	},
	// 配置loader
	module:{
		rules:[
			test: '/\.(jpg|png|gif)$/',
			use:{
				loader: 'url-loader',
				options:{
					name:'[name]_[hash].[ext]',
					outputPath:'images/',
					limit:409600, // 小于409kb则使用base64格式,大于则放在images/ 下
				}
			}
		]
	}
}

style-loader 和 css-loader打包样式

css-loader: 分析项目当中css文件 @import 等的一些依赖引用关系，最终生成一段css代码。
style-loader: 将生成的css代码，放到html的head里面作为 style
注意! 开发环境比较少用style-loader，css代码被全部打包到了main.js里面，需要对css代码进行抽离。

module.exports = {
	module:{
		rules:[
			test: '/\.css$/',
			use:[
				// 注意！ 执行顺序时从下往上执行的！
				'style-loader',
				'css-loader'
			]
		]
	}
}

sass-loader 和 postcss 打包样式

sass-loader: 用于处理scss语法的预处理css语言。
postcss-loader: 用于对css3的一些语法做兼容的处理，例如添加前缀 -ms, -webkit等；
其中postcss-loader需要一个文件，创建postcss.config.js 来再配置一个插件autoprefixer：

// npm install autoprefixer -D
module.exports = {
	plugins:{
		require('autoprefixer')
	}
}

同时这个autoprefixer插件又会参照我们对 package.json中设置的属性browserslist，会根据这个属性进行添加厂商的前缀：

"browserslist":{
	'>1%', // 兼容市场份额大于1% 的浏览器
	'last 2 versions' // 并且这个浏览器的上两个版本都要做兼容
}

最终：

module.exports = {
	module:{
		rules:[
			test: '/\.scss$/',
			use:[
				// 注意！ 执行顺序时从下往上执行的！
				'style-loader',
				'css-loader'
				'postcss-loader'
				'sass-loader'
			]
		]
	}
}

babel-loader，babel

npm install babel-loader @babel/core -S
npm install @babel/preset-env -S

在匹配js文件的时候要排除 node_modules文件，具体方式有两种include和exclude：

module.exports = {
	module:{
		rules:[
			test: '/\.js$/',
			exclude:'node_modules', // 第一种方式
			// 第二种方式 include:[resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
			use:{
				loader: 'babel-loader', // 用来处理js文件，打包后还是es6代码
				options:{
					presets: ['@babel/preset-env'], // 他知道如何将es6翻译成es5
				}
			}
		]
	}
}

使用babel-loader 和 @babel/preset-env 就可以将es6的语法转换成es5的语法，但是却无法转换es6的某些关键字和属性，例如promise 和 promise的属性 map，这种情况在一些低版本浏览器或者低版本的IE浏览器下会产生BUG，所以使用 babel-polyfill进行再翻译.

babel-polyfill 解决低版本浏览器对promise 的一个兼容问题

npm install @babel/polyfill

在需要进行转换的js地方引入@babel/polyfill，就可以解决问题！

import '@babel/polyfill'

但，这样做会使得打包后的js文件变得很大，需要在loader中配置一下：

module.exports = {
	module:{
		rules:[
			test: '/\.js$/',
			exclude:'node_modules',
			use:{
				loader: 'babel-loader',
				options:{
					presets: [
						'@babel/preset-env',
						// 配置如下，就可以使文件体积变小
						// 告诉polyfill 只添加使用到的es6变量，多余的不做添加
						{
							useBuiltIns: 'usage'
						}
					], 
				}
			}
		]
	}
}

vue-loader

解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ]
}

vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的javascript代码