Webpack知识体系 | 青训营笔记

今天是参加字节青训营笔记创作活动的第4天，学习了有关Webpack的知识，文杰老师讲的非常不错，也为日后的学习开发提供了一条新思路。Webpack可以帮助我们完成一些任务，比如js压缩、CSS压缩、编译模板文件等等，从而减少前端的工作量。当然，webpack的功能远不止这些，下面我们来慢慢了解Webpack吧。

本篇笔记主要从Webpack定义、Wepack打包核心流程、Loader组件、Plugin组件、学习攻略五个方面介绍下Webpack。

Webpack定义

Webpack本质上是一种基于Node.js开发出来的前端资源编译、打包工具，可支持多种功能，下面列举几项：

• 将多分资源文件打包成一个Bundle
• 支持模块化处理CSS、图片等资源文件
• 支持持续监听、持续构建
• 支持代码分离
• 支持HMR+开发服务器
• 支持Tree-Shaking
• 支持Less、Sass

Webpack打包核心流程

在介绍这部分前，我们先来简单的了解一下Webpack的安装。

1.安装

npm i -D webpack webpack-cli

2.编辑配置文件---webpack.config.js

   module.exports = {
     entry: 'main.js',
     outpuy: {
       filename: "[name].js",
       path: path.join(__dirname, "./dist"),
     },
     module: {
       rules:[{
         test: /\.less$/i,
         use: ['style-loader', 'css-loader', 'less-loader']
       }]
      }
     }

3.执行编译命令

npx webpack

了解了安装步骤之后，我们看一下Webpack打包的核心流程。这里放上课上的图。

先找到entry文件来启动编译流程，之后依次根据require或者import之类的语句找到依赖资源（每一次只进行一个依赖解析，完成依赖解析的完整流程后，递归调用知道所有的类似语句处理完毕），进行资源解析，将非JS资源转译为JS内容，最后将转译后的资源内容合并并打包为直接在浏览器运行的JS文件。

在上述打包流程中，我们还可以使用模块化和一致性的概念对Webpack打包过程进行优化。

模块化：

• 多个文件资源合并成一个，通过减少http的请求数提高效率。
• 支持模块化开发。

一致性：

• 支持高级JS特性。
• 支持Typescript、CoffeeScript方言。
• 统一图片、CSS、字体等其他资源的处理模型。

模块化已经是现代中不可或缺的一部分了,把复杂的问题分解成相对独立的模块，这样的设计可以降低程序复杂性，提高代码的重用，也有利于团队协作开发与后期的维护和扩展。

模块化的核心

• 独立的作用域
• 如何导出模块内部数据
• 如果导入外部模块数据

配置总览：

可参考Webpack配置官方文档

使用Webpack流程指南：

1.声明入口entry 2.声明产物出口output 3.运行npx webpack

处理CSS

结构示例：

index.js示例：

接入Babel

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.执行npx webpack

结构示例：

index.js示例：

可参考babel-loader | webpack

生成HTML

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

结构示例：

可参考HtmlWebpackPlugin | webpack

Tree-shaking定义：

• 代码没有被用到，不可到达。
• 代码的执行结构不会被用到。
• 代码只读不写。
• 模块导出了，但未被其它模块使用。