什么是webpack

简单来说，webpack是一个简单的打包工具。可以将互相依赖的html，css，js，以及图片文字字体文件等资源文件，经过处理打包一个可执行的项目文件

开始第一步

我们开始第一步的话 要去配置初始环境 在需要使用webpack文件夹下， 首先去执行npm initial-y去初始化， 其中-y表示所有选项使用的默认

在执行 npm add webpack webpack-cli -- dev 将webpack安装在开发者模式 这个我们就能获得初始的开发环境

新建一个“src”文件夹，然后在里面index.js 编写一个简单的hello 同时添加到index 文件夹中

之后我们就能看到我们的打包文件 dist文件夹 里面的main.js就是打包完成的文件

接下来我们体验一下webpack整合代码的功能

这个就代码整合的过程

配置webpack.config.js

webpack.config.js 这个文件就像webpack 的大心脏 接下来我们就开始吧

初等配置

const path = require("path");
module.exports = {
    mode: "development",  // 这个是开发者模式 ，便于我们以后的维护
    entry: "./src/index.js",   // 这个是入口文件  
    output: {
        filename: "dist.js",
        path: path.resolve(__dirname,"dist"),
    }
}

• mode，选择了开发者模式
• entry，选择了相对于config文件的src目录下的index.js作为入口文件
• output, 对于输出配置了输出的名字，并且使用了自带的path配置了输出目录

执行npx webpack，可以看到不仅重新输出了dist.js，其中的内容也和之前的有了不一样

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

这样可以避免打包文件更新之后，浏览缓存发生改变 ，可以给文件添加一段随机的字符，每次更新后都会生成新的随机字符，所有webpack.config.js output中设置

打包css文件和图片

要先安装 npm add --dev style-loader css-loader 配置如下：

 {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: "asset/resource",
            },

test 这里面的通过正则来表示解析什么样的文件

所以在入口文件index.js中引入style.css和图片assets/images/avater.jpg即可

使用webpack插件自动生成html文件

还是安装

npm add html-webpack-plugin --dev

然后导入webpack.config.js文件

const HtmlWebpackPlugin = require("html-webpack-plugin")

再进行配置即可

  plugins:[
    new HtmlWebpackPlugin()
    title:'文件名'
  ],

所以这时候再执行打包命令，可以看到输出文件夹下还多了一个index.html

这个HTML的标题默认为Webpack App

我们也可以对这个进行配置

兼容低版本浏览器

这个可以借助我们的依赖 babel 而webpack也支持相应的loader

所以首先还是安装

npm add --dev babel-loader @babel/core @babel/preset-env

这三个包提供了我们需要的功能

然后再进行下面的配置 这个也是写在 model 中的

{
  test: /.js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env"],
    },
  },
},

用于将 ES6+ 的代码转换为向后兼容的 JavaScript 代码，以便在现代浏览器中运行。

压缩打包后的js代码

同样是两步，先安装

npm add --dev terser-webpack-plugin

然后引入和配置

const TerserPlugin = require("terser-webpack-plugin")

  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },

• TerserWebpackPlugin：

1. 代码压缩：TerserWebpackPlugin 使用 Terser 压缩器对 JavaScript 代码进行压缩，包括删除空格、注释和不必要的代码，以及压缩变量名等操作，从而减小文件体积。
2. 混淆：该插件可以将 JavaScript 代码进行混淆，使得代码更难以理解，增加了代码的安全性。
3. 删除未使用的代码：TerserWebpackPlugin 可以检测并删除未使用的代码，减小最终生成的文件大小，提高性能。
4. 配置灵活：插件提供了丰富的配置选项，可以根据项目需求进行定制，例如启用/禁用某些压缩选项、设置压缩的级别等。

无需执行命令自动打包

现在每次修改了代码后都得重新执行打包命令

webpack也提供了一个插件能在保存后自动打包

还是先安装

npm add --dev webpack-dev-server

然后先在webpack.config.js中进行配置

  devServer: {
    static: "./dist",
  },

再在package.json中进行配置

  "scripts": {
    "start": "webpack serve --open"
  },

这样在我们执行npm start的时候就会自动执行webpack serve

并且通过 npm start 打开的网页能在我们修改保存后自动刷新页面

配置可视化打包工具

这是一个帮助分析的工具，它会可视化地展现打包过程中哪个文件占的体积比较大

所以同样的，先是安装这个插件

npm add --dev webpack-bundle-analyzer

接着在配置中引入这个插件

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer");

以及在plugins中添加它

  plugins: [
    new HtmlWebpackPlugin({
      title: "test",
    }),
    new BundleAnalyzerPlugin.BundleAnalyzerPlugin()
  ],

所以此时再运行npx webpack

自动跳出了这样的文件分析图

难点 ：在webpack打包过程中 文件过大 可以怎么样处理

1. 压缩代码：使用 TerserWebpackPlugin 或者其他压缩插件来压缩 JavaScript 代码，减小文件体积。
2. 图片优化：对图片文件进行优化，可以使用像 Image-webpack-loader 这样的 loader 来压缩图片，减小图片文件的大小。
3. 移除不必要的插件和库：检查项目中是否有不必要的插件和库，尽量只保留需要的部分，减小打包文件的体积。

SplitChunksPlugin

SplitChunksPlugin 是 Webpack 提供的一个用于代码拆分的插件，它可以将公共模块拆分出来，从而减小每个入口文件的体积，提高加载速度。具体来说，SplitChunksPlugin 可以根据配置选项将重复的代码拆分成单独的 chunk，并且在必要时自动创建新的 chunk。

const webpack = require('webpack');

module.exports = {
 // 其他配置项...
 optimization: {
   splitChunks: {
     chunks: 'all',
     minSize: 20000, // 拆分前的最小文件大小，默认为 30kb
     maxSize: 0, // 拆分后的最大文件大小，0 表示不限制
     minChunks: 1, // 被拆分模块至少被引用的次数，默认为 1
     maxAsyncRequests: 30, // 按需加载时的最大并行请求数，默认为 5
     maxInitialRequests: 30, // 入口点的最大并行请求数，默认为 3
     automaticNameDelimiter: '~',
     name: true,
     cacheGroups: {
       vendors: {
         test: /[\\/]node_modules[\\/]/,
         priority: -10
       },
       default: {
         minChunks: 2,
         priority: -20,
         reuseExistingChunk: true
       }
     }
   }
 }
};

在这个配置中，我们通过 optimization.splitChunks 来配置 SplitChunksPlugin。其中，chunks: 'all' 表示拆分所有类型的 chunk，包括入口 chunk 和异步加载的 chunk。其他配置项用于定义拆分的规则和条件，例如最小/最大文件大小、最小引用次数等。

通过合理地配置 SplitChunksPlugin，可以将公共模块拆分出来，减小打包文件的体积，提高加载速度。