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

本篇笔记将重点围绕「构建 Webpack 知识体系」这一核心话题展开。解读为什么需要学习 Webpack ，Webpack 的本质是什么以及 Webpack 技术优势等相关知识。

Webpack

什么是Webpack

Webpack本质是一种前端资源编译、打包工具。可以解决旧时代一些手动的问题，使得前端工程化，提高自动化率。编译时为了应对图片，TS等非标准的JS文件，编译成JS的内容，打包是指把编译好的内容打包成一个文件。不需要再对非JS的资源设计管理规范

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

Webpack打包核心流程

简单的流程

步骤：安装依赖，配置文件，执行命令 Webpack做的事情：模块化+一致性。 都用require+import去管理

Webpack的使用方法

基本围绕“配置”进行，关键就是怎么写配置文件。这些配置可以大致分为两类

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

流程配置的步骤如下：

entry是整个项目的入口，context是webpack运行的时候从哪个地方去找文件

//声明入口
module.exports={
 entry:"./src/index"
 };
 
 //声明产物出口output
 const path = require("path");
 
 module.exports ={
    entry:"./src/index/",
    output:{
       filename :"[name],js",
       path: path.join(__dirname,"./dist"),
 }
 };

处理CSS

1. 安装Loader
2. 添加‘module’处理css文件