字节跳动青训营--Webpack

文章目录

前言
一、为什么要学习Webpack？
二、什么是Webpack？
- 1. 产生背景
- 2. 基础概念
三、使用Webpack
四、如何使用Webpack
- 流程类配置
- 配置总览
五、理解Loader
六、理解插件
- 插件钩子
课外关注资料

前言

此文章仅用来记录学习。

一、为什么要学习Webpack？

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

二、什么是Webpack？

1. 产生背景

## 前端项目构成
在过去主要是通过手动管理这些资源，这会导致出现大量的问题：

依赖手工，比如有50个JS文件…操作，过程繁琐
当代码文件之间有依赖的时候，就得严格按依赖顺序书写
开发与生产环境一致，难以接入TS或JS新特性
比较难接入Less、Sass等工具
JS、图片、cSS资源管理模型不一致

由于上诉问题的出现，就衍生出了很多现代化工具：webpack，vite，rollup，gulp等等

2. 基础概念

概念：用于现代 JavaScript 应用程序的静态模块打包工具

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

三、使用Webpack

1. 安装

npm i -D webpack webpack-cli

2. 编辑配置文件

module.exports = {
   optimization:{
       minimize: false // 关闭代码压缩，可选
   },
   entry: "./src/index.ts",
   output: {
       path: path.resolve(__dirname, "dist"),
       filename: "bundle.js",
       environment: {
           arrowFunction: false // 关闭webpack的箭头函数，可选
       }
   },
   module: {
       rules: [{
            test: /\.ts$/,
            use: {loader: "ts-loader" },
            exclude: /node_modules/
       }]
   }
}