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

1. 如何加载模块

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

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

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

   image-20201112104146536.png
   loader是webpack实现前端模块化的核心，只有通过不同的loader，才能实现任何类型资源的加载

2. 常用加载器分类

   • 编译转换类

     将加载的模块转换为JS代码，css-loader

   • 文件操作类

     加载的资源模块拷贝到输出目录，将文件的访问路径向外导出，file-loader

   • 代码检查类

     统一代码风格，提高代码质量

3. webpack与ES 2015

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

4. 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时会触发资源模块加载
                   },
            },
   }
   

5. webpack核心工作原理

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

开发一个 Loader

深入了解loader的工作原理

开发markdown文件转换为html

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

image-20201112120025547.png

多个loader配合

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