loader打包静态文件

 file-loader

module: {
	rules: [{
		test: /\.(jpg|png|gif)$/,
		use: {
				loader: 'file-loader',
				options: {
					// placeholder 占位符
					name: '[name]_[hash].[ext]', // 打包出来的图片以原来的名字加hash值来命名
					outputPath: 'img/' // 打包的文件在dist文件夹下的img文件夹中
				}
			} 
		}]
	},

url-loader

使用url-loader也可以打包图片文件，打包的文件会生成base64编码在js文件中，但是图片过大，会导致js文件也很大，如果图片很小，可以使用url-loader， 因此可以在options中加选项配置limit

module: {
	rules: [{
		test: /\.(jpg|png|gif)$/,
		use: {
				loader: 'url-loader',
				options: {
					// placeholder 占位符
					name: '[name]_[hash].[ext]', // 打包出来的图片以原来的名字加hash值来命名
					outputPath: 'img/', // 打包的文件在dist文件夹下的img文件夹中
                    limit: 20480 // 如果文件小于20480个字节（20kb），就将图片打包base64放在js中
				}
			} 
		}]
	},

 css-loader / style-loader / sass-loader node-sass

引入css时，

module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		},{
			test: /\.scss$/,
			use: [ // loader执行顺序是由下到上执行的，从右到左执行的
				'style-loader', 
				{
					loader: 'css-loader',
					options: {
						// 假如你在引入css的时候使用了import 导入了css文件，
						// 默认是不走下边两个loader的,配置了这个参数就可以使用下边的loader， 
						// 0 => no loaders (default);
                        // 1 => postcss-loader;
                        // 2 => postcss-loader, sass-loader
					    importLoaders: 2, 
						modules: true, // 开启css的模块化打包，避免import style.css这种全局引入导致样式的错乱
					}
				}, 
				'sass-loader',
				'postcss-loader' // 这个loader会让css3的特性加上webkit moz之类的前缀， 具体查看文档，需要新建postcss.config.js文件
			]
		}]
	},

打包iconfont

module: {
		rules: [{
			test: /\.(eot|ttf|svg)$/,
			use: {
				loader: 'file-loader'
			} 
		}]
	},