webpack 简介 - 技术栈

一、概述

Webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。当开发一个复杂的前端项目时，会有许多不同类型的文件，如JavaScript、CSS、图片等，Webpack能够将这些文件视为模块，并按照一定的规则和依赖关系进行处理，最终生成优化后的、可以在浏览器中高效运行的静态资源。

二、核心概念

1. 入口（entry）

入口点是Webpack开始构建模块依赖图的起点。可以是一个或多个JavaScript文件。例如，在一个简单的单页应用中，可能有一个main.js作为入口文件，Webpack会从这个文件开始分析它所依赖的其他模块。
配置示例：
- 单入口 ：entry: './src/main.js'是单入口的简单形式。它适用于简单的应用，如小型的工具库或者只有一个主要 JavaScript 文件的网页。
- 多入口：在多页面应用中很有用。例如：
  javascript 复制代码
```
module.exports = {
    entry: {
        page1: './src/page1.js',
        page2: './src/page2.js'
    }
};
```
  这样可以分别为page1和page2这两个页面构建独立的模块依赖图和打包文件。

2. 输出（output）

输出配置告诉Webpack将打包后的文件放在哪里，以及如何命名这些文件。它包括目标目录（path）和文件名（filename）等属性。例如：

javascript 复制代码

const path = require('path'); 
module.exports = { 
    entry: './src/main.js', 
    output: { 
        path: path.resolve(__dirname, 'dist'), 
        filename: 'bundle.js' 
    } 
};

这里将打包后的文件输出到项目根目录下的dist文件夹中，文件名为bundle.js。

输出（output）的高级配置

文件名哈希（filename with hash）：为了更好地进行缓存管理，可以在文件名中加入哈希值。例如：

javascript 复制代码

output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: '[name].[contenthash].js' 
}

这里[name]会被替换为入口的名称（如page1、page2），[contenthash]是根据文件内容生成的哈希值。当文件内容改变时，哈希值也会改变，这样浏览器就可以根据文件名来判断是否需要重新加载文件。

3. 加载器（loader）

Webpack本身只能理解JavaScript文件，加载器用于让Webpack能够处理其他类型的文件，如CSS、图片等。
加载器的顺序 ：加载器的执行顺序是从右到左 ⬅或者从下到上⬆。
例如，在处理 Sass 文件时，可能需要先使用sass-loader将 Sass 转换为 CSS，再使用css-loader和style-loader。配置如下
- css-loader用于解析CSS文件中的@import和url()语句
- style-loader则将CSS代码注入到HTML页面的<style>标签中。
配置示例：

javascript 复制代码

module.exports = { 
    module: { 
        rules: [ 
            { 
                test: /\.css$/, 
                // 从下到上⬆
                use: [
                    'style-loader', 
                    'css-loader',
                    'sass-loader'
                ]
                //  从右到左 ⬅
                // use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ] 
    }
};

自定义加载器：除了使用现有的加载器，还可以编写自己的加载器。一个简单的自定义加载器可以是将文本文件中的内容进行某种转换。
例如，一个将文本文件中的所有字母转换为大写的加载器：

javascript 复制代码

module.exports = function(content) { return content.toString().toUpperCase(); };

4. 插件（plugin）

插件用于执行范围更广的任务，如代码压缩、资源优化等。
例如，UglifyJsPlugin可以压缩JavaScript代码，减少文件大小，提高加载速度。
配置示例（以UglifyJsPlugin为例）：

javascript 复制代码

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = { 
    plugins: [ new UglifyJsPlugin() ] 
};

html-webpack-plugin：这个插件可以自动生成 HTML 文件，并将打包后的 JavaScript 和 CSS 文件自动插入到 HTML 中。例如：

javascript 复制代码

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
};

clean-webpack-plugin：在每次重新打包时，它可以清理之前的输出目录，确保只有最新的文件存在。配置如下：

javascript 复制代码

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
};

三、工作流程

解析（resolving）

Webpack从入口文件开始，递归地构建一个模块依赖图。它会解析模块之间的import和require语句，确定每个模块的依赖关系。
例如，在main.js中如果有import React from 'react';这样的语句，Webpack会去查找react模块的位置。

加载（loading）

根据模块的文件类型，使用相应的加载器对模块进行加载和转换。如对于.jsx文件，可能会使用babel - loader将其转换为普通的JavaScript文件。

打包（packaging）

将所有模块及其依赖打包成一个或多个文件。这个过程会根据输出配置将打包后的文件输出到指定的目录中，并且会对代码进行优化，如删除无用的代码、压缩等操作。

四、应用场景

单页应用（SPA）开发

在开发像React、Vue等框架构建的单页应用时，Webpack可以将组件代码、样式和其他资源打包成一个或几个文件，方便在浏览器中加载和运行。它能够处理组件之间的复杂依赖关系，确保应用程序的正确运行。

多页面应用（MPA）开发

对于多页面应用，Webpack可以为每个页面分别配置入口文件，将每个页面所需的资源打包成独立的文件。这样可以有效地避免不同页面之间加载不必要的资源，提高页面加载速度。

前端资源优化

通过插件和加载器，Webpack可以对CSS、JavaScript等资源进行压缩、合并、代码分割等操作，减少网络请求次数和文件大小，从而提升前端应用的性能。

拓展

1. 代码分割（Code Splitting）

原理与作用：代码分割是将应用的代码按照一定的规则分成多个小块（chunks）。
这样做的主要目的是减少初始加载时的代码量，提高应用的加载速度。
例如，对于一个大型的单页应用，不是一次性加载所有的 JavaScript 代码，而是将一些不常用的功能模块（如用户登录后的高级功能）分割出来，当用户需要时再进行加载。
- 实现方式：
  - 动态导入（Dynamic Imports） ：在 ES6 中，可以使用import()函数进行动态导入。例如：
  javascript 复制代码
```
button.addEventListener('click', () => {
    import('./advancedFeature.js').then((module) => {
        module.doSomething();
    });
});
```
- 配置分割点（Split Points）：可以通过配置Webpack来设置代码分割的点。
- 例如，使用optimization.splitChunks配置来告诉Webpack如何分割代码块。
  javascript 复制代码
```
optimization: {
    splitChunks: {
        chunks: 'all'
    }
}
```

2. 开发环境与生产环境配置差异

开发环境（Development）
- 热模块替换（Hot Module Replacement，HMR） ：这是开发环境中非常有用的功能。它允许在不刷新整个页面的情况下更新模块。
- 例如，在修改了一个 React 组件的样式或逻辑后，只更新这个组件，而不是重新加载整个页面。在 Webpack 中，可以通过webpack-dev-server来启用 HMR。
  javascript 复制代码
```
devServer: {
    contentBase: './dist',
    hot: true
}
```
- Source Map：开发环境下通常需要配置Source Map，以便在调试时能够准确地定位到原始代码中的错误位置。例如：
  javascript 复制代码
```
devtool: 'eval-source-map';
```
生产环境（Production）
- 代码压缩与优化 ：在生产环境中，重点是优化代码，减少文件大小。除了前面提到的UglifyJsPlugin，还可以使用optimize-css-assets-webpack-plugin来压缩 CSS 文件。 javascript
  ini 复制代码
```
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin(),
            new OptimizeCSSAssetsPlugin()
        ]
    }
};
```
- 去除调试代码（Dead - Code Elimination） ：一些开发环境下的调试代码（如console.log语句）在生产环境中是不需要的。可以通过工具（如terser-webpack-plugin）来自动去除这些代码。
1. 为什么要去除调试代码 - 在开发过程中，我们经常会使用console.log、debugger等调试语句来帮助定位问题和理解程序的执行流程。然而，在生产环境中，这些调试代码是不必要的，它们会增加代码体积，并且可能会影响性能。
  - 例如，console.log语句会在浏览器控制台输出信息，这在生产环境中可能会泄露敏感信息或者占用不必要的资源。
2. 手动去除调试代码 - 最直接的方法是在将代码部署到生产环境之前，手动删除这些调试语句。但是这种方法非常繁琐，尤其是在大型项目中，很容易遗漏或者误删其他重要代码。而且，如果后续需要对代码进行调试，还需要重新添加这些语句。
3. 使用Webpack插件去除调试代码
- terser-webpack-plugin（推荐）
- 安装：首先需要安装terser-webpack-plugin，可以通过npm install terser-webpack-plugin - y来完成安装。
- 配置使用 ：在Webpack的配置文件（通常是webpack.config.js）中，在optimization部分进行配置。例如：
  javascript 复制代码
```
const TerserPlugin = require('terser-webpack-plugin'); 
module.exports = { 
    optimization: { 
        minimizer: [ 
            new TerserPlugin({ 
                terserOptions: { 
                    compress: { 
                        drop_console: true, // 去除console语句 
                        drop_debugger: true // 去除debugger语句 
                    } 
                } 
            }) 
        ] 
    } 
}; ```
```
- 这里的terserOptions.compress选项用于配置压缩相关的内容。
  - drop_console设置为true会去除所有的console.log、console.error等console相关的语句，
  - drop_debugger设置为true会去除debugger语句。
- uglifyjs-webpack-plugin
- 安装：通过npm install uglifyjs-webpack-plugin - y安装。
- 配置使用 ：
  javascript 复制代码
```
const UglifyJsPlugin = require('uglifyjs - webpack - plugin'); 
module.exports = { 
    plugins: [ 
        new UglifyJsPlugin({ 
            uglifyOptions: { 
                compress: { 
                    drop_console: true, 
                    drop_debugger: true 
                } 
            } 
        }) 
    ] 
}; ```      
```
- 它的工作原理与terser-webpack-plugin类似，都是通过配置压缩选项来去除调试代码。不过，terser-webpack-plugin在功能上可能更加强大，并且在处理现代JavaScript代码（如ES6 +）时可能会有更好的性能。
1. 其他构建工具和方法
- Babel插件：如果项目使用了Babel进行转码，也可以使用一些Babel插件来去除调试代码。
- 例如，babel-plugin-transform-remove-console可以在Babel转码过程中去除console语句。
- 配置如下：
  javascript 复制代码
```
{ 
    "plugins": [
        [
            "babel-plugin-transform-remove-console", 
            {
                "exclude": ["error", "warn"] 
            }
        ] 
    ] 
} ```
```
- 这里的exclude选项可以指定不被去除的console类型，如console.error和console.warn可以保留，只去除console.log等其他类型。
- Rollup.js等其他打包工具 ：Rollup.js也是一个流行的JavaScript打包工具。它也有类似的插件来去除调试代码，如rollup-plugin-terser，配置思路和Webpack插件类似，都是通过配置压缩选项来达到去除调试代码的目的。