Webpack(系列二)：什么是loader？

什么是loader？

Loser就是一个打包的方案，他知道对于某一个特定的文件，Web pack应该如何的进行打包。

本身webpack 对于一些文件是不知道该如何处理的，但是loader知道，所以呢，我们想要打包其他文件格式的话，直接去配置loader可以了

如何打包图片资源？

可以结合两个插件去配置图片的打包，file-loader 和url-loader

下载插件

npm install file-loader -D 		//对于大的图片去做处理
npm install vue-loader -D 		//对于小的的图片去做处理

file-loader 和url-loader的区别？
- file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL
- url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。也就是对于小的图片会以base64字符串的形式打包到js中，减少请求
  
  如果超过最大限定字节的图片，url-loader对该图片会像file-loader一样将图片打包到你指定的文件夹下

打开webpack.config.js文件进行配置

module:{
    rules:[
            {
            test: /\.(png|svg|jpe?g)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  // 设置最大字节，超过该字节，会放入images文件夹里
                  limit: 8192,
                  // 简写方法，将打包后的图片放入dist/images文件夹里
                  //图片名称还是原来的名称 哈希值不想要的话去掉就行
                  name: 'images/[name].[hash:7].[ext]',
                  publicPath: './'
                }
              }
            ]
          },
          {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            loader: 'file-loader'
        }
    ]
}

如何打包 css，scss文件？

下载插件
```
npm install css-loader style-loader sass-loader -D
```
打开webpack.config.js文件进行配置

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

( 注：loader是从下到上，从右到左的顺序加载，use中的顺序不能改变 )

遇到兼容问题需要加兼容前缀

下载插件

npm install -D postcss-loader

npm install autoprefixer -D

打开webpack.config.js文件

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

在根目录下创建postcss.config.js文件

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

css-loader中的常用配置项

module:{
	rules:[
		{
			test:/\.(css|sass|scss)$/,
			use:[
				'style-loader',
				//将原来的'css-loader'改为对象
				{
					loader:'css-loader',
					options:{
					//在import引入其他的scss时webpack可能不会执行'sass-loader'和‘postcss-loader’，加了importLoader:2，那么webpack就会按顺序再次执行
						importLoaders:2,
						//css模块化：只在当前模块有效，不影响其他模块,不会和其他模块产生冲突
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader'
			]
		}
	]
}

如何打包第三方字体文件

module:{
		//打包外部第三方字体
		{
			test:/\.(eot|ttf|svsg)/,
			use:{
				//实际上就是从src目录下移到dist文件下
				loader:'file-loader‘ 
			}
		}
	]
}

webpack中使用plugin让打包更加便捷！

plugin插件的作用

plugin 可以在webpack运行到某个时刻的时候，帮你做一些事情

打包过后并没有自动生成index.html ？

1.安装插件

命令行输入：npm install html-webpack-plugin -D

2.使用步骤

（1）在webpack.config.js中引入

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

（2）使用plugin

与output等对象同级

plugins:[new HtmlWebpackPlugin( )],

（3）重新打包，发现dist文件夹下自动生成一个html文件,并把打包生成的js自动引入到这个html文件中

（4）在src 文件夹下创建一个html的模板

（5）在webpack.config.js文件中修改

plugins:[new HtmlWebpackPlugin({

template:‘src/index.html’

})],

（6）再次打包，发现dist文件下的html文件多了你刚刚写的html模板的内容

在重新打包时自动先删除dist文件夹

安装插件

命令行输入：npm install clean-webpack-plugin -D

引入

//打开webpack.config.js文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

//在plugins中调用
plugins:[new HtmlWebpackPlugin({ 
	template:'src/index.html'
}),new CleanWebpackPlugin()],//删除dist文件夹

具体详细的配置，在webpack官网中介绍的很详细：链接地址

感谢观看！其中如果有哪点是错的，还请指导一下！谢谢