// webpack
// 多入口
// 多出口（动态配置文件名称）
// 模块解析（module）
// 需要安装对应的处理模块
// css:npm install style-loader css-loader
// module: {
// rules: [
// // 当webpack遇到不认识的模块，需要对应的loader进行处理
// {
// test: /\.css$/,
// use:
// // 两个loader的时候使用数组,loader有执行顺序，从后往前
// ["style-loader", "css-loader"]
// },
// {
// test:/\.css$/,
// // 多个loader的写法和单个loader的写法不同，单个loader使用对象形式，多个loader直接使用数组形式
// use:{
// loader:"url-loader"
// }
// },
// {
// test:/\.css$/,
// use:{
// //filr-loader是专门处理静态资源模块的
// loader:"file-loader",
// // loader是可以配置参数的
// options:{
// // 打包后的静态资源名称
// //不同的文件打包后的文件名称不同，所以不能使用固定的文件名称，所以要使用静态资源占位符
// // name:'pic.png',
// // [name]传进来的文件名称
// // [hash]当前打包版本的hash,[hash:6]可以保留指定位数hash
// // [ext]当前打包的格式，官网loader上边还有其他特定的占位符，
// name:"[name]_[hash].[ext]",
// // 输出路径，统一管理文件的存放位置
// outputPath:'images/'
// }
// }
// }
// ]
// }
// 经常使用的处理的文件：css文件、less文件、scss文件、字体图标、图片
// webpack官网中的loader部分有官方推荐的loader
// url-loader可以代替file-loader有limit字段，能限制文件大小，当文件的大小小于设置的尺寸。会被转化成base64格式，大于limit才会以独立文件显示，可以针对图标进行设置，低于一定大小的时候不以文件形式存在可以减少请求实现优化
// 处理less要使用less和less-loader（按webpack官网进行配置）
// can i use 网站上边可以看兼容性的问题
// 样式自动添加前缀postcss-loader autoprefixer -D
// 自动添加css前缀
// {
// test:/\.less$/,
// use:["style-loader","css-loader","less-loader",{
// loader:"postcss-loader",
// options:{
// plugins:()=>{
// require("autoprefix")
// }
// }
// }]
// }
// loder是webpack解析模块的，plugins是来扩展webpack的功能的
// 构建之前先删除dist文件夹，防止dist中遗留很多版本的文件
// 这类的功能是通过webpack的plugins插件扩展配置来实现的
// clean-webpack-plugin构建前清空dist目录
// html-webpack-plugin打包后自动创建html文件
// 步骤：
// 1、引入插件
// const {CleanWebpackPlugin} = require("clean-webpack-plugin")
// 2、实例化插件
// plugins:[
// new CleanWebpackPlugin()
// ]
// 3、可以在实例化的时候传入对象参数来对插件做配置
// const HtmlWebpackPlugin = require('html-webpack-plugin')
// plugins:[
// new HtmlWebpackPlugin({
// 配置项参数参考文档：https://github.com/jantimon/html-webpack-plugin#configuration
// html文件中要使用ejs语法的模板引擎
// 使用<%=htmlWebpackPlugin.options.title%>可以访问到
// })
// ]
// mini-css-extract-plugin可以是css生成一个独立的css文件，而不是直接在html中以style标签的形式插入,不能使用style-loader,而是使用MiniCssExtractPlugin,要规定输出的文件名称
// const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// plugins:[
// new MiniCssExtractPlugin()
// ]
