Webpack 打包---流程和loader

Posted michael_yqs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack 打包---流程和loader相关的知识,希望对你有一定的参考价值。

为什么要模块化?

  • ES Modules 存在环境兼容问题
  • 模块文件过多,网络请求频繁
  • 所有的前端资源都需要模块化
    主流模块打包工具:webpack(适用于大型应用)、parcel(小型应用,快速开发测试demo)、rollup(适用于单模块开发)

webpack 配置文件

webpack.config.js

module.exports = 
  entry: './src/index.js', // 入口文件:相对路径不能省略 ./
  output:  // 输出配置
    filename: 'bundle.js', // 打包后的文件名
    path: path.join(__dirname, 'dist') // 打包输出路径:需要绝对路径
  ,

webpack 的工作模式: mode

  • production 生产模式:打包、压缩代码
  • development 开发模式:优化打包效率,添加调试辅助
  • none 运行最原始的打包,不会做额外的处理

webpack构建流程

webpack是运行在nodejs环境下,配置文件遵循commonjs规范。其配置文件webpack.config.js导出一个object/function/promise/array。 Webpack在启动后,会从entry开始,递归解析entry依赖的所有Module,每找到一个Module,就会根据Module.rules里配置的Loader规则进行相应的转换处理,对Module进行转换后,再解析出当前Module依赖的Module,这些Module会以entry为单位进行分组,即为一个Chunk。因此一个Chunk,就是一个entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。在整个构建流程中,Webpack会在恰当的时机执行Plugin里定义的逻辑,从而完成Plugin插件的优化任务。其流程如下:

  1. 配置初始化
    webpack会首先读取配置文件,执行默认配置

  2. 编译前准备
    webpack 会实例化compiler,注册plugins、resolverFactory、hooks。

  3. reslove前准备
    webpack 实例化compilation、NormalModuleFactory和ContextModuleFactory

  4. reslove流程
    解析文件的路径信息以及inline loader和配置的loader合并、排序

  5. 构建module
    runLoaders处理源码,得到一个编译后的字符串或buffer。将文件解析为ast,分析module间的依赖关系,递归解析依赖文件

  6. 生成chunk
    实例化chunk并生成chunk graph,设置module id,chunk id,hash等

  7. 资源构建
    使用不同的template渲染chunk资源

  8. 文件生成
    创建目标文件夹及文件并将资源写入,打印构建信息

加载器(loader)

webpack 默认的 loader 是只能处理js,其他类型资源可以使用相应的 loader ,如css -loader,html-loader。常用的加载器分为三类:编译转换类、
文件操作类、代码检查类。下面列举几个常见的文件操作类加载器。

CSS 资源 - css-loader、style-loader

  • css-loader 会将 css 文件打包成一个 js 模块,将 js 文件作为 webpack 的入口文件,然后在 js 文件中通过 import 的方式引入 css 文件
  • style-loader 将 css-loader 转换过的代码通过 style 标签的形式追加到页面上
const path = require('path')
module.exports = 
  mode: 'none',
  entry: './src/index.js',
  output: 
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath:'dist/'
  ,
  module: 
    rules: [ // 其他资源模块加载规则的配置
      
        test: /.css$/, // 匹配打包过程中遇到的文件路径
        use: [ // 指定匹配到的文件需要使用的 loader。
          // 如果有多个loader,webpack会从后往前执行loader,所以这里要先调用css-loader把css代码转换成js代码
          'style-loader',
          'css-loader'
        ]
      
    ]
  

文件资源加载器 file-loader 适合体积较大的文件

对于体积较大的文件,使用文件提取的方式,提高加载速度
将文件拷贝到打包目录,然后将拷贝后的路径作为返回值返回。使用模块的导出成员获取这个资源的访问路径,需要配置 打包后资源的位置

module.exports = 
  output: 
    publicPath: 'dist/' // 资源路径,默认为 '' 即 /
  ,
  module: 
    rules: [
      
        test: /.png$/,
        use: 'file-loader'
      
    ]
  

url-loader 适合体积较小的文件

对于体积较小的文件,使用data-url的方式,减少请求次数

module.exports = 
  output: 
    publicPath: 'dist/' // 资源路径,默认为 '' 即 /
  ,
  module: 
    rules: [
      
        test: /.png$/,
        use: 
          loader: 'url-loader',
          options: 
            limit: 10 * 1024 // 只对 10KB 以下的文件做 data-url 转换,
            // 超过的文件交给 file-loader 处理(webpack会默认调用 file-loader)
          
        
      
    ]
  

手写loader--------markdown-loader

loader其实是一个工作管道,通过某种特定的方式把输入转换成输出,这个输出可以是一段可以执行的js代码,也可以是一个可供其他loader(管道)使用的中间结果。
自定义loader的编写分为两步:

  1. 创建 markdown-loader.js 文件
  2. markdown-loader.js 导出一个函数,这个函数就是这个loader对加载到的资源的处理过程。输入是资源文件加载到的内容;输出就是此次加工过后的结果。这个结果可以有两种:1.可以执行的js代码 2.返回一个可供其他loader处理的结果

markdown-loader.js

const marked = require('marked');//marked用来处理 markdown 文件
module.exports = source => 
  const html = marked(source);
  // 1. 将html stringify,转义 引号和换行符 ,再导出
  return `module.exports = $JSON.stringify(html)`
  // 2. 直接返回 html 字符串,将结果交给下一个 loader 处理
  //return html

webpack.config.js中增加loader配置

//webpack.config.js中增加loader配置
module.exports = 
//....其他配置已省略
  module: 
    rules: [
    //...其他配置已省略
      
        test: /.md$/,
        use: [
          'html-loader',
          './markdown-loader' // 使用相对路径找到 markdown-loader
        ]
      
    ]
  

以上是关于Webpack 打包---流程和loader的主要内容,如果未能解决你的问题,请参考以下文章

Webpack 打包---流程和loader

Webpack 打包---流程和loader

webpack面试题

webpack 打包样式(3)

webpack工作流程

webpack执行机制流程是怎么样的