理解Webpack知识体系（1）| 青训营笔记

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

一、为什么要学习Webpack?

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

二、什么是Webpack?

其本质上是前端资源编译、打包工具。

三、使用Webpack

- 基本步骤

1. 安装

npm i -D webpack webpack-cli

2. 编辑配置文件

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

3. 执行编译命令

npx webpack

- 核心思想

• 1.入口处理 ：从entry文件开始，启动编译流程
• 2.依赖解析：从entry文件开始,根据require or import等语句找到依赖资源
• 3.资源解析：根据module配置,调用资源转移器，将png.css等非标准JS资源转译为JS内容
• 4.资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

四、Webpack配置分类

关于 Webpack的使用方法,基本都围绕“配置”展开，而这些配置大致可划分为两类:

• 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项。
• 工具类:主流程之外，提供更多工程化能力的配置项将转译后的资源内容合并打包为可直接在浏览器运行的JS文件。

1. 使用webpack——处理css
2. 使用webpack——接入babel
3. 使用webpack——生成HTML
4. 使用webpack——hmr
5. 使用webpack——tree-shaking
6. 使用webpack——工具栈

未完待续...

后记这是第一次些笔记，如有错误请多多指教