Webpack 学习笔记:
基于node.js
创建node.js项目(blog为项目名):
mkdir blog
进入项目内
cd blog
初始化一个包管理文件(package.json)
yarn init -y
或者
npm init -y
初始化webpack依赖文件为默认
yarn add webpack webpack-cli --dev
或者
npm install webpack webpack-cli -g
使用vscode打开项目
code .
打开命令行终端进行打包成一个dist文件
npx webpack
首先创建webpage配置文件webpack.config.js
打包css文件需要使用loader插件
安装style-loader、css-loader
yarn add --dev style-loader css-loader
yarn add --dev style-loader css-loader
npm install style-loader css-loader --save-dev
安装HTML Webpack Plugin(使用它来实现将HTML文件转换为JavaScript模块的功能)
yarn add html-webpack-plugin --dev
npm install html-webpack-plugin --save-dev
这个命令会将HTML Webpack插件作为开发依赖项安装到项目的node_modules目录中，并将其添加到项目的package.json文件中的devDependencies中,在构建项目时，HTML Webpack Plugin不会被安装到全局范围内，而只会被安装到项目的开发环境中。
导入工具插件
进行配置：
场景：
兼容低版本浏览器
在开发前端项目的时候有时候使用了新的 JavaScript 新特性要兼容低版本浏览器时用babel这个工具来转译js代码，webpack也支持相应的loader
首先安装 babel-loader、@babel/core 和 @babel/preset-env
yarn add --dev babel-loader @babel/core @babel/preset-env
npm install --save-dev babel-loader @babel/core @babel/preset-env
Babel-loader 是 Webpack 的一个 loader，它可以将 JavaScript 代码转换为浏览器可用的代码。具体来说，Babel-loader 可以使用 Babel 将 ES6+（ES2015+）代码转换为 ES5 或更早的代码，从而使得代码可以在浏览器中运行。
@babel/core 是 Babel 的核心库，它提供了编译时需要的各种功能，例如解析器、编译器、插件等。
@babel/preset-env 是 Babel 的一种预设，它可以根据指定的目标浏览器版本，自动配置需要的 Babel 插件和转换规则，从而使得代码可以在该浏览器中运行。
通过使用 Babel-loader、@babel/core 和 @babel/preset-env，你可以将最新的 JavaScript 语法和特性转换为浏览器可用的代码，从而使得你的代码更具有可移植性，并且可以跨多个浏览器和版本运行。
webpack.config.js配置：
压缩打包后js代码：
减少打包后的文件体积
安装Terser Webpack Plugin
yarn add --dev terser-webpack-plugin
npm install --save-dev terser-webpack-plugin
Terser Webpack Plugin 是一个 Webpack 插件，它用于压缩和混淆 JavaScript 代码。它使用 Terser 库来执行压缩和混淆操作，从而提高代码的加载速度和运行效率。
通过使用 Terser Webpack Plugin，你可以在 Webpack 构建过程中自动地对 JavaScript 代码进行压缩和混淆。这有助于减少代码的大小，从而提高页面加载速度和应用程序性能。此外，通过对代码进行混淆，还可以提高代码的可保护性，减少代码被窃取和逆向工程的风险。
webpack.config.js配置：
下载完成后导入
进行配置：
自动打包
在开发的时候每次改动后都得手动npx webpack打包一次，在代码更改时无需刷新整个页面
安装 webpack-dev-server
yarn add --dev webpack-dev-server
npm install --save-dev webpack-dev-server
通过使用 webpack-dev-server，你可以在开发过程中方便地查看和测试你的 Web 应用。它支持 hot module replacement（HMR），即在代码更改时无需刷新整个页面，只有更改的部分会动态更新。这使得开发过程更加快速和高效。
package.json配置：
webpack.config.js配置：
webpack可视化
有时候可能需要分析一下打包后的结果，比如哪个文件比较大，然后进行下一步优化
安装webpack-bundle-analyzer
yarn add --dev webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
webpack-bundle-analyzer 是一个 Webpack 插件，用于分析和可视化打包后的代码大小。它提供了一个可交互的报告界面，可以帮助你了解打包后的代码哪些模块占用了最大的空间，以及代码的打包分布情况。
通过使用 webpack-bundle-analyzer，你可以更好地了解你的代码打包后的情况，找出潜在的优化点，并优化你的代码打包。它可以帮助你发现哪些模块占用了最大的空间，哪些模块是重复的，以及哪些模块可以进一步优化。这些信息有助于你优化代码的打包大小，提高应用的性能和效率。
运行npx webpack自动打开可视化界面窗口
webpack.config.js配置：
导入工具插件
配置：
总的
webpack.config.js配置文件
//引入Node.js的核心模块path
const path = require("path");
//导入将HTML文件转换为JavaScript模块HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//导入压缩打包后的js代码工具TerserPlugin
const TerserPlugin = require("terser-webpack-plugin");
//导入可视化工具BundleAnalyzerPlugin
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
//设置为开发模式
mode: "development",
//可以查看和理解编译后的代码
devtool: "inline-source-map",
// 入口文件
entry: "./src/index.js",
// 出口文件配置
output: {
//打包后的文件名,[name]会被自动转换为默认的main,
//[contenthash]会每次根据文件的内容进行hash计算得出一串不重复的字符
//这样打包的时候文件内容发生变化，[contenthash]也会发生变化
// filename: "[name].[contenthash]",//打包成不重复文件名
filename: "dist.js",//打包成dist.js即文件名
path: path.resolve(__dirname, "dist"), //打包后的存放目录(存放在dist目录下)
},
//优化项配置：压缩js代码
optimization: {
//是否进行压缩
minimize: true,
//使用什么工具来压缩（使用TerserPlugin工具来压缩）
minimizer: [new TerserPlugin()],
},
//自动打包，更新页面
devServer: {
//指定dist目录
static: "./dist"
},
//打包html文件
plugins: [
new HtmlWebpackPlugin(
{ title: "博客列表" }
),
//可视化分析工具（用于分析和可视化打包后的代码大小）
new BundleAnalyzerPlugin(),
],
module: {
rules: [{//打包css样式文件
test: /.css$/i,// 正则表达式去匹配.css文件，i表示不区分大小写
use: ["style-loader", "css-loader"] //使用style-loader，css-loader
},
//打包图片文件
{
test: /.(jpg|png|svg|jpeg|gif)$/i,// 正则表达式去匹配.jpg等后缀文件，i表示忽略大小写
//由于使用内置的loader
type: "asset/resource",
},
//兼容低版本浏览器的loader
{
//匹配js扩展名的文件
test: /.js$/,
//忽略node_modules这个目录
exclude: /node_modules/,
use: {
//使用loader配置项指定使用哪一个loader（使用babel-loader）
loader: "babel-loader",
//传递配置
options: {
//自动转译代码
presets: ["@babel/preset-env"],
}
}
}
]
},
}
