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

Webpack知识体系

一.为什么要学习 Webpack

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

二.什么是 Webpack

前端项目由什么构成？ —— 资源（各式各样的文件）

09年之前：

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

09年：

出现了很多工程化工具，某种程度上正是这些工具的出现，才有了“前端工程化”这一概念

本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、 TS、CoffeScript、 Less、Sass
- 支持模块化处理cSs、图片等资源文件
- 支持HMR +开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree -shaking
- 支持Sourcemap

三.Webpack 打包核心流程

1.概念

1.示例

安装
```
npm i -D webpack webpack-cli
```

编辑配置文件（webpack.config.js)

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' ]
        }]
    }
}

执行编译命令
```
npx webpack
```

2.极度简化版

3.模块化+一致性

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

4.使用 Webpack

关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项

5.流程类配置

6.配置总览

按使用频率
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
Webpack 配置文件官方文档

2.使用流程

1.初始化搭建

文件结构

声明入口

module.exports = {
    entry:"./src/index"
};

声明产物出口

const path = require("path");

module.exports = {
     entry:"./src/index",
     output: {
        filename:"[name].js",
        path:path.join(__dirname,"./dist"),
     }
}

运行 npx webpack

2.处理 CSS

文件结构

index.js文件导入css文件

const styles = require('./index.css')

import styles from './index.css'

安装 Loader

npm add -D css-loader style-loader

添加 ‘ module ’ 处理 css 文件

const path = require("path");

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

问题：

Loader 有什么作用？为什么这里需要用到 css - loader/style - loader

与旧时代——再HTML 文件中维护 css 相比，这种方式会有什么优势？

有没有接触过 Less、Sass、Stylus 这一类 CSS 预编译框架？如何在 Webpack 接入这些工具？

答：

3.接入 Babel

文件结构

index.js文件

class Person {
    constructor() {
        this.name = 'Tecvan'
    }
}

console.log((new Person()),name)

const say = () => {}

安装依赖

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

声明产物出口‘output’

const path = require("path");

module.exports = {
     entry:"./src/index",
     output: {
        filename:"[name].js",
        path:path.join(__dirname,"./dist"),
     }，
     module:{
        rules:[{
            test:/.js?$/,
            use:[{
                lander:'babel-loader',
                options:{
                    presets:[
                        [
                            '@babel/prest-env'
                        ]
                    ]
                }
            },]
        }],
     },
};

执行 npx webpack

思考：

Babel 具体有什么功能？

Babel 与 Webpack 分别解决了什么问题？为何两者能协作到一起？

4.生成 HTML

文件结构

安装依赖

npm i -D html-webpack-plugin

声明产物出口 output

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
     entry:"./src/index",
     output: {
        filename:"[name].js",
        path:path.join(__dirname,"./dist"),
     },
    plguins:[new HtmlWebpackPlugin{ }]
}

执行 npx webpack

思考：相比于手工维护 HTML 内容，这种自动生成的方式有什么优缺点？

3.工具线

4.HMR

Hot Module Replacement —— 模块热替换

开启 HMR

module.exports = {
    devServer: {
        hot:true
    }
}

启动 Webpack

npx webpack server

参考：《Webpack 原理系列十：HMR 原理全解析》

5.Tree - Shaking

Tree - Shaking — 树摇，用于删除 Dead Code

四.理解 Loader

因 Webpack 只认识JS，故：

为处理非标准 JS 资源，设计出资源翻译模块 —— Loader，用于将资源翻译为标准 JS

1.使用 Loader

结构：

index.js
```
import styles from './a.less'
```

安装 Loader

npm add -D css-loder style-loader less-loader

添加 module 处理 css 文件

module.exports = {
    module:{
        rules:[
            {
                test:/.less$/i,
                use:[
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ]
            }
        ]
    }
}

Webpack知识体系 | 青训营笔记

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