webpack Loader机制

模块打包工具出现

随着模块化思想引入产生一些新的问题

首先 ES Modules存在环境兼容问题，用户浏览器不统一
其次模块化划分出的模块文件过多，前端频繁请求，影响工作效率
最后 JS模块化基础上的发散 HTML、CSS等需要模块化

如何使用`webpck`实现模块化打包

webpack作为模块打包工具，可以实现模块化代码打包的问题
对于有环境兼容问题的代码：可以在打包过程中通过Loader机制对其进行编译转换，在进行打包
对于不同种类的前端模块，支持在javaScript中以模块化的方式载入任意类型的资源文件：例如可以通过webpack实现在JavaSCript中加载css文件，被加载的css文件通过style的方式工作
具备代码拆分能力项目所有模块按需分块打包，按需加载

配置`webpack`打包过程

webpack.config.js运行在nodejs环境，可以直接在文件中使用path之类的nodejs内置模块

例子

`webpack`工作模式

针对不同环境的三组预设配置

production模式启动内置优化插件，自动优化打包结果，打包速度较慢（默认）
development模式自动优化打包速度，添加一些调试过程中的辅助插件以便于更好的调试错误
none模式运行最原始的打包，不做任何额外处理，用于分析模块打包结果

修改方式

通过cli --mode参数传入
通过配置文件设置mode属性

通过Loader实现特殊资源加载

loader是webpack实现整个项目的模块化,项目中各种资源都需要被管理

实现不同资源加载的核心是loader

如何加载模块

通过css-loader加载css资源，webpack使用loader处理模块，内部loader只能处理js模块

css文件经过css-loader打包之后再由webpack打包

css-loader 只会把 CSS 模块加载到 JS 代码中，而并不会使用这个模块，需要在添加额外的style-loader才能正常工作

image-20201112104146536.png

loader是webpack实现前端模块化的核心，只有通过不同的loader，才能实现任何类型资源的加载
常用加载器分类
- 编译转换类
  
  将加载的模块转换为JS代码，css-loader
- 文件操作类
  
  加载的资源模块拷贝到输出目录，将文件的访问路径向外导出，file-loader
- 代码检查类
  
  统一代码风格，提高代码质量
webpack与ES 2015

因为模块打包需要，只是对import和export做处理，webpack不会自动打包ES6的代码，需要使用babel-loader

webpack加载资源方式

// 1. 支持 ES Modules 的 import 声明
import createHeading from './heading.js'
// 2. 支持 CommonJS 的 require 函数
const createHeading = require('./heading.js').default
// 3. 支持 AMD 的 require / define 函数
define(['./heading.js'], (createHeading) => {
  const heading = createHeading.default()
  document.body.append(heading)
})
require(['./heading.js''], (createHeading) => {
  const heading = createHeading.default()
  document.body.append(heading)
})
// 4.部分 loader 加载的资源中一些用法也会触发资源模块加载
<img src="better.png" alt="better" width="256">
<a href="better.png">download png</a>
// 需要配置html的attributes属性为true
{
    test: /.html$/,
        use: {
            loader: 'html-loader',
                options: {
                    attributes: false, // true时会触发资源模块加载
                },
         },
}

webpack核心工作原理

一般webpack入口都是js文件，根据代码中出现的import或require解析出所依赖的资源模块，然后解析每个资源模块的依赖，最后形成整个项目所有依赖关系的依赖树，递归依赖树，找到每个节点所对应的资源文件，最后根据配置文件中的rule属性找到模块所对应的加载器，交给加载器加载对应模块，最后将加载到的模块放入打包后的文件，从而实现整个项目打包

开发一个 Loader

深入了解loader的工作原理

开发markdown文件转换为html

webpack资源加载类似工作管道，可以使用多个loader，输出结果必须是标准的js代码

image-20201112120025547.png

多个`loader`配合

首先使用自己的loader转换为html文件，再次使用html-loader转换为js代码
例子

webpack Loader机制

模块打包工具出现

如何使用webpck实现模块化打包

配置webpack打包过程

webpack工作模式