什么是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：
- 代码压缩：TerserWebpackPlugin 使用 Terser 压缩器对 JavaScript 代码进行压缩，包括删除空格、注释和不必要的代码，以及压缩变量名等操作，从而减小文件体积。
- 混淆：该插件可以将 JavaScript 代码进行混淆，使得代码更难以理解，增加了代码的安全性。
- 删除未使用的代码：TerserWebpackPlugin 可以检测并删除未使用的代码，减小最终生成的文件大小，提高性能。
- 配置灵活：插件提供了丰富的配置选项，可以根据项目需求进行定制，例如启用/禁用某些压缩选项、设置压缩的级别等。
无需执行命令自动打包
现在每次修改了代码后都得重新执行打包命令
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打包过程中 文件过大 可以怎么样处理
- 压缩代码：使用 TerserWebpackPlugin 或者其他压缩插件来压缩 JavaScript 代码，减小文件体积。
- 图片优化：对图片文件进行优化，可以使用像 Image-webpack-loader 这样的 loader 来压缩图片，减小图片文件的大小。
- 移除不必要的插件和库：检查项目中是否有不必要的插件和库，尽量只保留需要的部分，减小打包文件的体积。
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，可以将公共模块拆分出来，减小打包文件的体积，提高加载速度。