webpack2-loader

概念： loader是一个打包的方案 ，对于某一个特定文件该怎么处理

• file-loader 将某一文件移动到dist 返回文件名字
  1. 处理图片

     rules:[
     	{
     		test:/\.(png|jpg|svg)/,
     		use:{
     			loader:"file-loader",
     			options:{
     				name：'[name][hash:8].[ext]',  //[name]文件原名字 [hash:8]8位hash [ext]文件后缀
     				outputPath:"images/"， //文件夹名字 将此类型文件放入文件夹
     				
     			}
     		}
     	}
     ]
  

  2. 字体文件
  

• url-loader

  rules: [
     {
       test: /\.(png|jpg|gif)$/i,
       use: [
         {
           loader: 'url-loader',
           options: {
             limit: 8192//图片小于8192k则打包成base64格式
           }
         }
       ]
     }
   ]
  

• css-loder style-loader stylus/sass/less postcss-loader
  1.stylus-loader将styl格式转化为css格式
  2.css-loder分析出几个css文件之间关系、合并成一段css

     loader:'css-loader',
        options:{
              importLoaders:2//@important 引入的文件依然执行下边的两个loader，
              modlues:true//css模块化
        }
  

  3.style-loader将css片段插入head内部
  4.postcss-loader autoprefixer 自动添加css后缀

   //在postcss.config.js 添加配置
    plugins:[
       require('autoprefixer')
    ]
  

• **babel-loader @babel/core babel @babel/preset-env @babel/polyfill **

  • babel-loader webpack和babel通信的桥梁
  • @babel/core babel核心库
  • @babel/preset-env 将es6转化为es5的模块
  • @babel/polyfill
    • @babel/preset-env转化后还有一些方法低版本浏览器不兼容，使用@babel/polyfill补充
      在main.js引入
  • 配置：

        //webpack.config.js 在module的rules配置
        {
               test:/\.js$/,
               exclude:/node_modules/,
               use:{
                   loader:'babel-loader',
                   options:{
                       "presets":[["@babel/preset-env",{
                           useBuiltIns:'usage',//填充时候，判断用到哪一个加入哪一个
                           targets:{
                              edge:"1" //制定兼容版本
                           }
                       }]]
                   }
               }
           }
         ```