构建工具

从开发到效率提升，（比如转译、压缩）构建工具其实做的是集成的工作。有了构建工具，开发者不需要再关心代码在浏览器是如何运行的，而只需要关系编写代码的过程。

所有的构建工具都是基于node平台运行的。

什么是webpack？

webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来，前端所有资源文件都会作为模块处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。

Webpack的5个核心

Entry（入口）

指示webpack以哪个文件为入口开始打包

Output（输出）

指定打包后的资源bundles输出到哪里去，如何命名。

Loader

本质就是一个函数。webpack只能处理js/json文件，所以要对非js文件进行转译，loader充当一个翻译官的工作。

写在module-rules，从右到左从下到上依次执行。

下载-使用

Plugins

可以扩展webpack的功能。在webpack的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。

下载-引入-使用。

使用时需要new一个实例。

Mode

模式指示webpack使用相应模式的配置，包括development（开发环境）和production（生产环境）生产环境要比开发环境多一个压缩的功能。

常用的loader

style-loader：创建style标签，将js中的样式资源添加到head。

css-loader：将css资源变成commonjs模块加载到js中，里面是样式字符串。

less-loader：less转译成css

scss-loader：scss转译成css

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)

url-loader：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值会交给 file-loader 处理，小于阈值时返回文件 base64 形式编码 (处理图片和字体)base64的好处是可以节省http请求，图片被编码之后，生成的字符串编码大小一般而言都会比原文件稍大一些，所以一般适用于小文件。

html-loader：处理html文件的img图片（负责引入img，从而能被url-loader进行处理）

postcss-loader：处理css兼容性

bable-loader：处理js兼容性

thread-loader

cache-loader:将结果缓存到磁盘

常用的plugin

html-webpack-plugin：创建一个空的html，自动引入打包输出的所有资源。设置minify参数可以压缩html代码。

1
2
3
4
5
6
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}

mini-css-extract-plugin：提取css成单独文件。

clean-webpack-plugin: 打包器清理源目录文件，在webpack打包器清理dist目录

optimize-css-assets-webpack-plugin：压缩css

Webpack优化策略

开发环境性能优化：优化打包构建速度、优化代码调试

生产环境性能优化：优化打包速度、优化代码运行性能

devServer中开启HMR（热更新）功能

1
2
3
4
5
6
7
8
9
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true,
// 开启 HMR 功能
// 当修改了 webpack 配置，新配置要想生效，必须重新 webpack 服务
hot: true
}

source-map

modules加入项

1
devtool: 'eval-source-map

可以将打包后代码映射到源文件。

开启缓存

babel的配置中加入cacheDirectory，第二次构建时，会读取之前的缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets: [
        [
        '@babel/preset-env',
        {
        useBuiltIns: 'usage',
        corejs: { version: 3 },
        targets: {
            chrome: '60',
            firefox: '50'
        	}
        }
        ]
     ],
        // 开启 babel 缓存
        // 第二次构建时，会读取之前的缓存
        cacheDirectory: true
    }
},

treeshaking

把文件中无用的模块或代码删除。在webpack5中已经自带tree-shaking功能，在打包模式为production时，默认开启 tree-shaking功能。

code-split

设置多入口

1
2
3
4
5
entry: {
// 多入口：有一个入口，最终输出就有一个 bundle
index: './src/js/index.js',
test: './src/js/test.js'
},

加入配置项

1
2
3
4
5
6
7
8
9
/*
1. 可以将 node_modules 中代码单独打包一个 chunk 最终输出
2. 自动分析多入口 chunk 中，有没有公共的文件。如果有会打包成单独一个 chunk
*/
optimization: {
    splitChunks: {
    	chunks: 'all'
    }
}

lazing-loading

1
2
3
4
5
6
7
// 单入口
entry: './src/js/index.js',
output: {
filename: 'js/[name].[contenthash:10].js',
path: resolve(__dirname, 'build')
},
plugins:

pwa

渐进式网络开发应用程序(离线可访问)

1
2
3
4
5
6
7
8
9
new WorkboxWebpackPlugin.GenerateSW({
/*
1. 帮助 serviceworker 快速启动
2. 删除旧的 serviceworker
生成一个 serviceworker 配置文件~
*/
clientsClaim: true,
skipWaiting: true
})

多进程打包

thread-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
    /*开启多进程打包。
    进程启动大概为 600ms，进程通信也有开销。
    只有工作消耗时间比较长，才需要多进程打包
    */
    {
    loader: 'thread-loader',
    options: {
    	workers: 2 // 进程 2 个
    }
}