webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它将项目中的各种资源（如 JavaScript、CSS、图片等）视为模块，并通过依赖关系将它们打包成优化的静态资源，适用于生产环境部署
详细请看官方文档：https://www.webpackjs.com/
配置环境
安装yarn
npm install yarn -g
初始化文件
yarn init -y
安装webpack
yarn add -D webpack webpack-cli
创建src文件夹
在src中创建index.js文件
配置webpack
创建webpack.config.js
module.exports={
}
打包命令
yarn webpack
webpack
1.入口（Entry）
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点
module.exports={
// entry:"./src/index.js"
// entry:["./src/index.js","./src/hello.js"]
entry:{
index:"./src/index.js",
hello:"./src/hello.js"
}
}
第一种只打包index.js
第二种index.js和hello.js一起打包在一个js文件里
第三种分别打包为两个js文件
2.输出（Output）
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
声明path
const path = require("path");
output: {
clean: true,
// filename: "[hash].js",
path: path.resolve(__dirname, "dist")
},
clean:清除之前打包文件
filename：设置打包后的js文件名称
path:指定打包到哪个文件夹（__dirname为初始名字）
3.模式 Mode
设置开发或生产环境，默认启用对应优化（如代码压缩）
mode: 'production',
mode: "development"
4.加载器（Loader）
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中
loader有两个属性
Css样式
安装
npm install –save-dev css-loader
npm install –save-dev style-loader
使用
module: {
rules: [
{
test: /\\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
5.插件(plugin)
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中
const HtmlWebpackPlugin = require('html-webpack-plugin');
页面渲染（html5）
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中
npm install –save-dev html-webpack-plugin
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
./index.html 依赖文件
开发服务器
webpack开发服务器（webpack-dev-server）是一个基于Express的轻量级服务器，专为webpack项目提供实时重新加载（Live Reloading）和模块热替换（HMR）功能。它通过内存编译文件，避免写入磁盘，显著提升开发效率
安装依赖
yarn add -D webpack-dev-server
npm install -D webpack-dev-server
在webpack.config.js中配置开发服务器：
module.exports = {
devServer: {
static: './dist', // 静态文件目录
hot: true, // 启用模块热替换
port: 8080, // 指定端口
open: true, // 自动打开浏览器
},
};
终端启动
yarn webpack serve //打包服务器
yarn webpack serve –open //自动打包
这就是我的本次分享
