webpack资源加载、核心工作原理

模块打包工具

1、模块打包的由来

• ES Modules存在浏览器兼容问题
• 模块文件过多，网络请求频繁
• 所有的前端资源都需要模块化

webpack模块打包器

1、webpack的基本使用

• yarn init初始化package.json
• 安装webpack开发依赖
  yarn add webpack webpack-cli --dev
• yarn webpack
  src/index.js --> dist/main.js

2、webpack配置文件

• 添加webpack.config.js文件
• 资源模块加载

const path=require("path")
module.exports={
    mode:'none', //webpack --mode 工作模式：1、production //自动处理代码 压缩 优化;2、 none
    
    entry:'./src/main.js',//打包入口文件的路径 相对路径./不可省略
    output:{//输出文件的路径  页面引入的是patn/filename
        filename:'bundle.js', //输出文件的名称
        path:path.join(__dirname,'output'),//输出目录 必须是绝对路径
        publicPath:'output/' //所有资源的基础路径是指项目中引用css，js，img等资源时候的一个基础路径
    },
    //webpack默认打包js文件 其他资源模块引用其他loader加载器

    
    //css yarn add css-loader --dev
    //    yarn add style-loader --dev 把css-loader转换后的结果 通过style标签追加到页面
    module:{//其他模块资源加载的规则
        rules:[
            {
                test:/.css$/, //正则匹配打包过程中的文件路径
                use:[//所用到的加载器 倒序执行
                    'style-loader',
                    'css-loader',
                ] 
            },
            {
                test:/.png$/, //正则匹配打包过程中的文件路径
                use:'file-loader'
            }
        ]
    }
}

3、webpack导入资源模块 css-loader

 - 在js中通过import导入css文件 等
 - 根据代码需要动态导入对应资源

4、webpack文件资源加载器 file-loader

- file-loader
- 在js文件中import文件资源
- webpack.config.js中module rules中配置

{
                test:/.png$/, //正则匹配打包过程中的文件路径
                use:'file-loader'
            }

output:{//输出文件的路径  页面引入的是patn/filename
        filename:'bundle.js', //输出文件的名称
        path:path.join(__dirname,'output'),//输出目录 必须是绝对路径
        publicPath:'output/' //所有资源的基础路径是指项目中引用css，js，img等资源时候的一个基础路径
    },

根据配置文件匹配到文件加载器，将导入的文件拷贝到输出目录，将文件拷贝到输出目录路径作为模块返回值返回,根据模块的导出成员拿到可访问路径

5、url加载器 url-loader

data urls:以代码形式表示任何资源的文件

• 安装url-loader加载器
• module rules中配置

{
                test:/.png$/, //正则匹配打包过程中的文件路径
                //小文件使用data urls,减少发送请求次数
                //大文件单独提取存放，提高加载速度
                use:{
                    loader:'url-loader',
                    options:{
                        //超出10kb 使用file-loader 小于的文件转换为data urls嵌入代码中
                        limit:10*1024 
                    }
                }
            }

6、常用的加载器分类

1. 编译转换类 css-loader
2. 文件操作类 file-loader、url-loader
3. 代码检查类 eslint-loader

7、webpack 与 ES2015

因模块打包需要，所以处理import和export，其他ES6特性并不兼容
使用babel-loader @babel/core @babel/preset-env 兼容ES6特性

• 在webpack.config.js的module rules里配置

 {
                test:/.js$/,
                use:{
                    loader:'babel-loader', //js转换加载器
                    options:{
                        presets:['@babel/preset-env']//依赖es6转化插件
                    }
                }
            },

8、webpack加载资源的方式

• 遵循 ES Module 标准的 import 声明
  

• 遵循 commonJS 标准的 require 函数
  

注意：require导入ES module模块要加.default属性去获取

• 遵循AMD标准的define和require函数

• html 中加载资源的方式 html-laoder

   例如：img:src       a:href
  

{
                test:/.html$/,
                use:{
                    loader:'html-loader',
                    options:{
                        attrs:['img:src','a:href'] //默认只有img:src
                    }
                }
            },

• css样式代码中的 @import 指令 和 background 中的 url 函数

8、loader机制是webpack的核心

webpack的核心工作原理：

根据配置找到打包入口文件，
顺着入口文件代码里的 import 和 require之类的语句，
解析推断文件所依赖的资源模块。
分别去解析每个资源模块对应的依赖，最后形成一颗依赖树，
递归依赖树，找到每个节点对应的资源文件，
根据配置文件 rules 属性，找到资源模块所对应的加载器，
交给对应的加载器加载对应的资源模块，
最后将加载以后的结果放入到bundle.js打包结果里，
实现整个项目的打包。