Webpack中的Loader

Loader-文件资源加载器

webpack默认只支持打包js文件，非js文件在Webpack中需要loader即文件加载器来进行打包编译，例打包css时，需要载入css-lodder、style-loader，在打包image时，需要载入file-loader
而加载器的匹配问题需要在webpack的配置文件进行设置

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /.css$/,
        //注意：loder是有执行顺序的，数组从右到左的执行顺序，而css加载器需要先执行css-loader，而后执行style-loader
        use: ['style-loader' , 'css-loader'] 
      }
    ]
  }
}

Webpack URL加载器

Data URLs: 可以用来直接表示一个文件，不用再发送http请求协议

在浏览器网址输入框中输入以下代码

data:text/html;charset=UTF-8,<h1>html content</h1>

png和font，二进制文件，则需要进行base64的编码
data:image/png;base64,图片的base64编码

在打包过程中，需要用到url-loader加载器

而对于是使用url-loader的方式编译二进制文件，还是使用file-loader的方式，需要根据需求来进行判断，那合理的做法是，依据文件的大小来进行区分编译，即如果文件小于某个限定值时，使用url-loader的方式，编译为data url的方式，否则使用file-loader的方式
配置如下：

//需要注意的是，这里只配置来url-loader，并不代表不需要安装file-loader，文件大于10kb时，还是需要用file-loader，如果不安装的话就会报错
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10kb
          }
        }
      }
    ]
  }
}

Webpack常用加载器分类

1. 编译转换类型的加载器
   将加载到的模块转换为javascript代码，
   例css-loader，就是将css文件转换成为一个javascript模块，从而实现通过javascript去运行css
2. 文件操作类型的加载器
   将加载到的资源模块拷贝到输入的文件目录，同时将文件的访问路径向外导出
   例file-loader
3. 代码检查类
   为了统一代码风格，从而提高代码质量
   例eslint-loader

Webpack 与 ES 2015

webpack并不会自动编译ES6的代码，webpack仅仅是对模块打包工具，所以才会export和import进行转换，而ES6的语法并不会转化

如果需要转换则需要配置编译型loader，例babel-loader，又因为babel-loader依赖babel的核心模块@babel/core，以及用于去完成具体特性转换插件的集合@babel/preset-env

 module.exports = {
   ...
   module: {
     rules: [
       {
         test: /.js$/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['@babel/preset-env']
           }
         }
       }
     ]
   }
 }

Webpack核心工作流程

项目中会有各种各样的资源文件，js，css，png，json，jpg，scss，less等
webpack会根据配置文件找到入口文件，在入口文件中，根据import，require解析依赖的资源模块，然后解析每个资源模块对应的依赖，从而生成依赖树，进而进行代码解析，生成打包文件

Loader机制是Webpack的核心