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

Webpack

一、webpack基本配置

1、5大核心概念

0. entry(入口) ：指示webpack从那个文件开始打包，即入口文件

1. output(输出) ：指示webpack打包完的文件输出到哪里去，如何命名

2. loader(加载器) ：webpack本身只能处理js、json等资源，其他资源需要借助loader，webpack才能进行解析

3. plugins(插件) ：扩展webpack的功能

4. mode(模式) ：主要有两种模式

   • 开发模式：development
   • 生产模式：production

2、开发模式的介绍

• 开发模式

  • 定义：开发模式顾名思义就是我们开发代码时使用的模式

  • 主要任务：

    0. 编译代码，是浏览器能够识别运行。开发时我们有样式资源、图片资源等webpack默认无法处理的资源，所以我们要加载配置来编译这些资源
    1. 代码质量检查，树立代码规范。提前检查一些代码的隐患，使代码更加健壮，统一格式使代码更美观

3、处理样式资源

处理CSS资源

0. 将需要打包的css文件引入到webpack入口文件中

1. 在webpack.config.js中的module中的rules配置好test与处理器loader

2. npm安装需要的loader

3. 进行webpack打包

二、Webpack核心流程

• 简化示意图如下：

三、常用工具类

1、HMR:模块热替换

• 开启方式:

  module.exports = {
      ...
      devServer:{
          hot:true
      }
  }
  

2、Tree-Shaking:树摇

• 作用:可以删除一些没用到的东西，减轻打包后体积

• 开启方式：

  module.exports={
      mode:"production"
      optimization:{
          usedExports:true
      }
  }
  

3、loader

• 核心功能(思想)：将非js资源转换为js资源

• 使用步骤

  • ①装对应loader的依赖
  • ②在webpack的config文件中添加module以处理文件

• 运行机制(特点):

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

• 常用的loader

4、插件plugin