Webpack 知识体系

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

为什么要学习 Webpack

• 理解前端“工程化”概念、工具、目标
• 一个团队总要有那么几个人熟悉 Webpack，某种程度上可以成为个人的核心竞争力
• 高阶前端必经之路

1.什么是 Webpack

• 前端项目由什么构成？—— 资源

  • 前端工程化工具出现之前靠手动管理资源文件，比如通过

     <link >
    

    标签引入样式文件，通过

     <script> </script>
    

    但：

    • 操作过程繁琐
    • 存在依赖关系时要严格按照顺序书写
    • 开发与生产环境一致导致难以接入 TS 或者 JS 的新特性
    • 比较难接入 Less、Sass 等工具
    • JS、CSS、图片资源管理模型不一致等

  • 为了解决这些问题出现了许多前端工程化工具：Webpack、Vite、browserifyjs 等，某种程度上正是这些工具的出现，才有了前端工程这一概念

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

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

2.使用Webpack

• 安装 Webpack：

 npm i -D webpack webpack-cli

• 编辑配置文件 webpack.config.js

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

• 执行编译命令

 npx webpack

• 模块化 + 一致性

  • 多个文件资源合并成一个，减少 HTTP 请求数
  • 支持模块化开发
  • 支持高级JS特性
  • 支持 Typescript、CoffeeScript 语言
  • 统一图片、CSS、字体等其他资源的处理模型

3.webpack的作用

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

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

3.1处理 CSS

• 安装 ：

 npm i -D webpack webpack-cli

• 安装loader

 npm i -D style-loader css-loader

• 添加 module 处理 CSS 文件

   const path = require('path');
   ​
   module.exports = {
       entry: './src/index.js',
       output: {
           filename: "[name].js",
           path: path.join(__dirname, "./dist"),
       },
       module: {
           rules: [{
               // test: /.less$/i,
               test: /.css$/,
               use: ['style-loader', 'css-loader']
           }],
       },
       mode: 'development',
   }
  

• 终端使用 npx webpack 进行编译

3.2接入 Babel

• 安装依赖：

 npm i -D @babel/core @babel/preset-env babel-loader

• 声明产物出口output

   const path = require('path');
   ​
   module.exports = {
       entry: './src/index.js',
       output: {
           filename: "[name].js",
           path: path.join(__dirname, "./dist"),
       },
       module: {
           rules: [
               {
                   test: /.css$/,
                   use: ['style-loader', 'css-loader']
               },
               {
                   test: /.js$/,
                   use: [{
                       loader: 'babel-loader',
                       options: {
                           presets: [
                               ['@babel/preset-env']
                           ],
                       },
                   }],
               },
           ],
       },
       mode: 'development',
   }
  

• 执行npx webpack

3.3生成HTML

• 安装依赖

 npm i -D html-webpack-plugin

• 声明产物出口output

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   ​
   module.exports = {
       entry: './src/index.js',
       output: {
           filename: "[name].js",
           path: path.join(__dirname, "./dist"),
       },
       module: {
           rules: [
               {
                   // test: /.less$/i,
                   test: /.css$/,
                   use: ['style-loader', 'css-loader']
               },
               {
                   test: /.js$/,
                   use: [{
                       loader: 'babel-loader',
                       options: {
                           presets: [
                               ['@babel/preset-env']
                           ],
                       },
                   }],
               },
           ],
       },
       plugins: [new HtmlWebpackPlugin],
       mode: 'development',
   }
  

• 执行npx webpack

3.4Tree-Shaking

• Dead code：

  • 代码没有被用到，不可到达
  • 代码的执行结果不会被用到
  • 代码只读不写..

• 开启 Tree-Shaking:

  • mode: "production"

  • optimization.usedExports: true

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

  • 终端使用 npx webpack 进行编译