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

👋本文介绍：1. 什么是Webpack | 2. 使用Webpack

什么是Webpack

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

编译是把非标准的JS 文件编译成一个标准的JS文件
打包是指把编译好的文件打包成一个Bundle

-多份资源文件打包成一个Bundle
-支持Babel、Eslint、TS、CoffeScript、Less、Sass
-支持模块化处理css、图片等资源文件
-支持HMR+开发服务器
-支持持续监听、持续构建
-支持代码分离
-支持Tree-shaking
-支持Sourcemap
......

使用Webpack

示例

安装

2. 编辑配置文件

3. 执行编译命令

4. 效果（把多个资源合并成一个资源）

核心流程——极度简化版

入口处理：从entry文件开始，启动编译流程
依赖解析：从entry文件开始，根据requireorimport 等语句找到依赖资源
资源解析：根据module配置，调用资源转移器，将png、css 等非标准JS资源转译为JS内容

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

资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

👋 回顾一下： webpack在本质上就做了两件事情：1. 模块化 2. 一致性

支持对不同类型的资源都用 requireorimport 等语句进行管理

支持模块化开发

支持高级JS特性

支持 Typescript、CoffeeScript等超集语言

支持多个文件资源合并打包成一个，减少http请求数

......

怎么使用Webpack

👋关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：

流程类：作用于前面提到的核心流程中某个or 若干个环节，直接影响打包效果的配置项

工具类：主流程之外，提供更多工程化能力的配置项

流程类配置

与输入有关的：

entry：定义这个项目的入口
context：决定webpack在运行的时候从哪个文件夹去找资源

与模块解析有关的：resolve 和 externals
与模块转译有关的：module
与后处理有关的：optimization 、 mode 和 target

配置总览

按使用频率：

entry/output
module/plugins
mode
watch/devServer/devtool

实例一：处理CSS

//文件结构
.
|-src
| |-index.js 
| |-index.css 
|---webpack.config.js

//index.js
const styles=require('./index. css');
//or 
import styles from'./index. css'

//1.安装Loader
npm add -D css-loader style-loader

//2. 添加 module 处理css文件
const path=require("path");

module.exports={
  entry:"./src/index",
  output:{
  filename:"[name].js",
    path:path.join(__dirname，"./dist"),
  },
  module:{
    //css 处理器
    rules:[{
    test:/.css/i,  //过滤条件
    use:[                               
      "style-loader",
      "css-loader"
      ],
    }],
  },
};

实例二：处理JS

接入Babel

Babel：本质上是一种JS代码转译的工具功能：

把高版本的JS代码转译成低版本的JS代码
支持语法扩展，能支持像 React 所用的 JSX 语法，同时还支持用于静态类型检查的流式语法（Flow Syntax）。
可以利用它们来创建下一代的 JavaScript 工具

//文件结构
.
|-src
| |-index.js  
|---webpack.config.js

//index.js (具有ES6的特性)
class Person{
    constructor(){
          this. name='Tecvan'
    }
}
console. log((new Person()). name)
const say=()=>{}

//1. 安装依赖
npm i -D @babel/core @babel/preset-env babel-loader

//2. 声明产物出口` output `
const path =require("path");
  module.exports={
    entry:"./src/index",
    output:{
      filename:"[name].js",
      path:path.join（_dirname，"./dist"）,
  },
  module:{
    rules:[{
    test:/.js？$/,
    use:[{
        loader:'babel-loader',
        options:{
          presets:[
                ['@babel/preset-env']
               ]
              }
            }
         },]
    }],
  },
  };
//3. 执行Webpack

实例三：生成HTML

//文件结构
.
|-src
| |-index.js  
|---webpack.config.js

//1. 安装依赖
npm i -D html-webpack-plugin

//2. 声明产物出口` output `
const path =require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports={
    entry:"./src/index",
    output:{
      filename:"[name].js",
      path:path.join（__dirname，"./dist"）,
    },
   plugins:[new HtmlWebpackPlugin()]
  };
//3. 执行`npx webpack`

Webpack工具——HMR

Hot Module Replacement——模块热替换(代码能立刻被更新到浏览器上，并且不需要刷新，直接就能应用新的代码)

//1. 开启HMR
//webpack.config.js
module.exports = {
  //核心配置项
  devServer : {
    hot: true
  }
};
//2. 启动Webpack
npx webpack serve

Webpack工具——Tree-Shaking

Tree-Shaking树摇，用于删除 Dead Code (将定义了却没有实际用到的代码删掉) Dead Code: 代码没有被用到，不可到达、代码的执行结果不会被用到、代码只读不写...

//webpack.config.js
module. exports={
  entry:"./src/index", 
  mode:"production", 
  devtool: false, 
  optimization:{
    usedExports: true,
  },
};

开启Tree-Shaking：

mode:"production",
optimization:{ usedExports: true }

本文总结：
什么是Webpack，怎样使用Webpack和它的核心流程
流程类配置和三个实例：处理CSS、处理JS和生成HTML、
Webpack的两个工具：HMR和Tree-Shaking

构建Webpack知识体系（入门篇）｜ 青训营笔记