前言

这是我参与「第四届青训营」笔记创作活动的第8天

下面让我们一起学习webpack在工程化中到底是如何使用的

为什么要学webpack

背景

来看看以前的项目是如何搭建的：

前端项目由什么构成？

由以下资源构成：

如何将这些资源创建和加入到一个具体的项目中呢？

以前没有工具只能通过手动管理这些资源，但是用两个字来说就是繁琐。

依赖手工，比如有50个js文件导要入项目，是不是要一个一个手动导入呢？过程非常繁琐
当代码文件之间有依赖的时候，就得严格按依赖顺序书写
开发与生产环境一致，难以接入TS或JS新特性
比较难以接入Less，Sass等工具
JS，图片，css资源管理模型不一致

这些都是旧时代非常突出的问题，对于开发效率影响非常大，直到一些工具的诞生。

正是这些工具的出现，才有了前端工程化的概念

什么是 webpack

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

多份资源文件文件打包生成一个Bundle
- eg：把要用到的script都打包为一个文件，那么项目引入这个文件，就相当于引入了多个打包前的script，一定程度上提高了开发效率
类似于工程化的中枢：支持Babel，Eslint，TS，CoffeScript，Less，Sass
统一了资源文件的管理模型：支持模块化处理css，图片等资源文件
支持HMR+开发服务器
支持代码分离
支持持续监听，持续构建
支持Tree-shaking，Sourcemap

使用 webpack

简单案例

解释：

entry:项目的入口，这里main.js是要被打包的文件
output项目的出口，这里dist是打包生成的文件

webpack工作的核心流程：

HMR(Hot Module Replacement)

webpack——模块热替换可实现代码修改刷新后直接生成效果

使用HMR的配置：

开启HMR

// webpack.config.js
module.exports ={
  // ...
  devServer:{
    hot: true
  }
}

启动webpack

npx webpack serve

效果如下：

如果想要详细了解HMR的实现原理，那么请点击这里

Tree-Shaking（树摇）

作用：用来删除 Dead code

Dead Code: 代码没有用到，代码的执行结果不会备用到，代码只读不写 Tree-Shaking：模块导出来了，但未被其他模块使用

来看案例：下图中bar.js定义了3个常量，index.js引入了bar.js,实际上只引入了两个常量bar，bar2，index.js实际上只用到了bar,而Tree-Shaking就是把这种定义了但却没有实际用到的代码给删掉。

开启tree-shaking

// webpack.config.js
module.exports = {
  // ...
  mode: "production",
  optimization:{
    usedExports: true,
  }
}

其他工具

缓存
Sourcemap
性能监控
日志
代码压缩
分包
...

loader组件

问题阐述：webpack只认识JS代码，对于图片，css样式等非JS代码它是无法识别的，会报错

解决：为了处理非标准JS资源，设计出资源翻译模块Loader，用于将资源翻译为标准JS，非JS资源转变为JS资源

loader使用：

安装loader

npm add -D css-loader style-loader less-loader

添加module项处理css文件

module.exports ={
  module: {
    rules:{
      test: /\.less$/i,
      use: [
        "style-loader",
        "css-loader",
        "less-loader",
      ],
    },
  },
}