在前端技术发展日新月异的今天，前端工程化已经成了每个前端工作/学习者的必备知识，一文带你吃透webpack

又是一年金九银十，虽然市场一般，如何才能抓住来之不易的机会呢？自然是砥砺自身能力，完善知识体系。 挖下深坑擒虎豹，挂上长线钓金鳌。 本文基于笔者的个人面试经历 + 线上他人面经，筛选整理高频面试题

起步 首先安装 webpack 依赖 我们要使用 ts 开发项目 配置打包命令，同时需要创建一个 webpack.config.ts 文件 webpack 默认不支持直接使用 ts 格式的配置文件，需

本系列第三篇，讲解优化构建速度：持久化缓存，多线程loader，devtool，loader作用范围等优化配置。

专栏第四篇-优化构建结果：构建分析，抽离css文件，清理无用css和js，hash策略，代码分割，devtool讲解，gzip压缩。

本系列第二篇，进阶功能配置：环境变量，支持css，less，图片和媒体资源，css3前缀，babel兼容等。

本系列第一篇，手动初始化vue3+ts项目，并用webpack5实现基础的vue3+ts开发和打包配置。

在实际开发中，可能会有一些定制化的需求、配置或者开发规范，而通用的官方脚手架通常都是最基本的架子，可能无法满足实际需求，这就会导致我们每新开一个项目就会做一些重复性的前置工作，脚手架就能解决这个问题。

下面是公司搭建的真实项目开发环境我提炼出来比较重要的一些知识点作为内部技术分享。 打包成功后，会在项目的根目录自动创建一个 dist 文件夹，里面的 main.js 文件就是我们打包后的文件。 注意：若不想将配置写在配置文件中，可在项目根目录创建 babel.config.js…