什么是loader？

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

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

如何打包图片资源？

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

1. 下载插件

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

2. 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文件？

1. 下载插件

   npm install css-loader style-loader sass-loader -D
   

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

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

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

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

1. 下载插件

   npm install -D postcss-loader

   npm install autoprefixer -D

2. 打开webpack.config.js文件

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

3. 在根目录下创建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官网中介绍的很详细：链接地址

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