「Webpack 知识体系|青训营笔记」今日内容： - 什么是 Webpack - Webpack 使用方法 - 理解

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

今日内容：

什么是 Webpack
Webpack 使用方法
理解 Loader

为什么要学习 Webpack？

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

什么是 Webpack

Webpack 本质上是一种前端资源编译、打包工具

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

Webpack 使用方法

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

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

流程类配置

’entry‘ ——> Get Start
- 输入：‘entry’，‘context’
‘require’，‘import’ ——> Dependencies Lookup
- 模块解析：‘resolve’，‘externals’
‘module’ ——> Transform
- 模块解译：‘module’
‘output’ ——> Combine Assets
- 后处理：‘optimization’，‘mode’，‘target’

配置总览

按使用频率：

entry/output
module/plugins
mode
watch/devServer/devtool

使用 Webpack

声明入口 ‘entry’

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

声明产物出口 ‘output’

const path = require("path");

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

运行 ‘npx webpack’

处理 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:{
        //css 处理器
        rules:[{
            test:/.css/i,
            use:[
                "style-loader",
                "css-loader"
            ],
        }],
    },
};

接入 Babel

安装依赖

npm i -D @babel/core @babel/preser-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:[{
                loader:'babel-loader',
                options:{
                    presets:[
                        [
                            '@babel/preset-env'
                        ]
                    ]
                }
            },]
        }],
    },
};

执行 ‘npx webpack’

生成 HTML

安装依赖
```
npm i -D html-webpack-pugin
```

声明产物出口 ‘output’

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

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

执行 ‘npx webpack’

HMR

开启 HMR

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

启动 Webpack
```
npx webpack serve
```

Tree- Shaking

开启 tree - shaking：

‘mode’：‘production’

‘optimization.usedExports: true’

module.exports = {
    entry:"./src/index",
    mode:"production",
    devtool:false,
    optimization:{
        usedExports:true,
    },
};

其它工具

缓存
Sourcemap
性能监控
日志
代码压缩
分包
...

理解 Loader

问题：Webpack 只认识 JS

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

用于将资源翻译为 JS

使用 Loader

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

特性

链式执行
支持异步执行
分 normal、pitch 两种模式

常见 Loader

JavaScript
- babel-loader
- eslint-loader
- ts-loader
- buble-loader
- vue-loader
- angular2-template-loader
CSS
- css-loader
- style-loader
- less-loader
- sass-loader
- stylus-loader
- postcss-loader
HTML
- html-loader
- pug-loader
- posthtml-loader
Assets
- file-loader
- val-loader
- url-loader
- json5-loader

学习方法

入门应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成 Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 webpack 环境
- 掌握常见脚手架工具的用法，例如：Vue-cil、create-react-app、@angular/cli
进阶
- 理解 Loader、Plugin 机制，能够自行开发 Webpack 组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
大师级
- 阅读源码，理解 Webpack 编译、打包原理，甚至能够参与共建