webpack学习笔记(二）loader

一. 什么是loader

webpack在打包的时候本身只能处理以.js结尾的文件，为了使其能打包处理其他各种类型的文件就增加了loader模块；
我们在打包对应的类型模块的时候，只需要下载对应的loader,然后在webpack.config.js中的module配置相中设置配置规则就可以了（具体可以查看官网的loader来确定打包各类模块所以依赖的loader)。
多个loader时的执行顺序是从下向上或者从右向左

二. 静态资源打包（具体可以查看官网的中文文档下的指南下的管理资源）

1. 图片篇

图片打包可以用url-loader或者file-loader

url-loader：

可以把图片以base64的格式打包到js文件中去，我们可以为设置limit配置项，如limit：204800 意思是当图片的大小超过200kb的时候将图片打包成单独的文件，小于的时候直接以base64的形式打包到js文件中。

// loader配置项
	module: {
		rules: [{
			test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
			use: {
				loader: 'url-loader',
				// options具体配置项查看官方文档
				options: {
					//打包到dist目录下的images文件夹下，并且名字不变
					name: '[name].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			}
		}]
	},

file-loader：

将图片单独打包

// loader配置项
	module: {
		rules: [{
			test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
			use: {
				loader: 'file-loader',
				// options具体配置项查看官方文档
				options: {
					//打包到dist目录下的images文件夹下，并且名字不变
					name: '[name].[ext]',
					outputPath: 'images/'
				}
			}
		}]
	},

2. 样式篇

(1) 依赖的loader：css-loader和style-loader,配置好后运行npm run bundle进行打包

css-loader可以帮助我们分析出各个css文件之间的关系
style-loader将css-loader生成的一个css样式挂载到页面的header部分

webpack.config.js

	// loader配置项
	module: {
		rules: [{
			test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
			use: {
				loader: 'url-loader',
				// options具体配置项查看官方文档
				options: {
					//打包到dist目录下的images文件夹下，并且名字不变
					name: '[name].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			}
		},{
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }]
	},

index.js

import './css/index.css';

var img = new Image();
img.src = img1;
img.classList.add('avatar')

var root = document.getElementById('root')
root.append(img)

index.css

@import url("avatar.css");

avatar.css

.avatar{
	width: 100px;
	height: auto;
}

(2) sass文件的打包除了依赖css-loader和style-loader，还需要sass-loader,同时还需要安装node-sass

命令行运行

npm install sass-loader node-sass  --save-dev

对webpack.config.js进行配置

{
    test: /\.scss$/,
    use: [ 'style-loader', 'css-loader','sass-loader' ]
 }

(3) 样式中自动添加厂商前缀所依赖的loader=》postcss-loader

安装完postcss-loader后，需要在项目的根目录下创建postcss.config.js文件并进行配置
在postcss.config.js文件中我们只需要保留plugins配置项就可以了
然后我们还需要下载autoprefixer插件在postcss.config.js的plugins配置项中引用

postcss.config.js

module.exports = {
  plugins: [
	  require('autoprefixer')
  ]
}