这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天。

什么是Webpack

本质上是一种前端资源编译、打包工具

使用Webpack

• 安装Webpack依赖：npm i -D webpack webpack-cli
• 编辑Webpack配置文件

module.exports = {
  ertry:'main.js', //项目入口文件
  watch:true,
  devServer:{//开启HMR
      hout:true,
      open:true
  },
  output:{
    filename:"[name].js", //输出文件名称
    path:path.join(__dirname,"./dist"), //输出文件位置
  },
  module:{
    rules:[{   //css处理器
      test:/\.less$/, //过滤条件
      use:['style-loader','css-loader','less-loader'], //满足过滤条件的用数组中的loader处理
    },
    { //babel处理器
      test:/\.js?$/,
      use:[{
          loader:'babel-loader',
          options:{
              presets:[
                  [
                      '@babel/preset-env'
                  ]
              ]
          }
      }]
    },]
  }
}

• 执行编译命令：npx webpack

核心流程-极简化版

1. 入口处理：从ertry文件开始，启动编译流程
2. 依赖解析：从entry文件开始，根据require或者import等语句找到依赖资源
3. 资源解析：根据module配置，调用资源转移器，将png、css等非标准js资源转译为js内容。
4. 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的js文件

注： 递归调用2、3，直到所有资源处理完毕

模块化+一致性

• 多个资源合并成一个，减少http请求
• 支持模块化开发
• 支持高级js特性
• 支持ts、CoffeeScript方言
• 统一图片、css、字体等其他资源的处理模型
• Etc

webpack配置分类

• 流程类： 作用于流程中某个or若干个环节，直接影响打包效果的配置项
• 工具类： 主流程之外，提供更多工程化能力的配置项

webpack-处理css

• 安装Loader：npm add -D css-loader style-loader
• 添加module处理css文件：见上方module模块

webpack-接入Babel

• 安装依赖：npm i -D @babel/core @babel/preset-env babel-loader
• 声明产物出口output
• 执行npx webpack

webpack-生成html

• 安装依赖：npm i -D html-webpack-plugin
• 声明产物出口output
• 执行npx webpack

webpack-HMR模块热替换

• 开启HMR：见代码
• 执行npx webpack server

理解loader

链式调用

• less-loader：less=>css
• css-loader：css包装成类似module.exports="${css}"的内容，包装后符合js语法
• style-loader：将css模块包装进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签

特点：

• 链式执行
• 支持异步执行
• 分normal、pitch两种模式