持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
依赖图（dependency graph）
任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有 依赖关系 。这使得 webpack 可以接收非代码资源(non-code asset)（例如图像或 web 字体），并且可以把它们作为 依赖 提供给你的应用程序。
webpack 从命令行或配置文件中定义的一个模块列表开始，处理你的应用程序。 从这些 入口起点 开始，webpack 递归地构建一个 依赖图 ，这个依赖图包含着应用程序所需的每个模块，然后将所有这些模块打包为少量的 bundle - 通常只有一个 - 可由浏览器加载。
// 参数{}：称为依赖图谱 模块的路径以及该模块被打包编译后生成的chunk（代码片段）
(function () {
})({})
webpack配置核⼼概念
- chunk：指代码块，⼀个 chunk 可能由多个模块组合⽽成，也⽤于代码合并与分割。
- bundle：资源经过Webpack 流程解析编译后最终结输出的成果⽂件。
- entry：⼊⼝起点，⽤来告诉webpack⽤哪个⽂件作为构建依赖图的起点。webpack会根据entry递归的去寻找依赖，每个依赖都将被它处理，最后输出到打包成果中。
- output： output配置描述了webpack打包的输出配置，包含输出⽂件的命名、位置等信息。
- loader：默认情况下， webpack仅⽀持 .js .json ⽂件，通过loader，可以让它解析其他类型的⽂件，充当翻译官的⻆⾊。理论上只要有相应的loader，就可以处理任何类型的⽂件。
- plugin： loader主要的职责是让webpack认识更多的⽂件类型，⽽plugin的职责则是让其可以控制构建流程，从⽽执⾏⼀些特殊的任务。插件的功能⾮常强⼤，可以完成各种各样的任务。
- webpack的功能补充
- mode： 4.0开始， webpack⽀持零配置，旨在为开发⼈员减少上⼿难度，同时加⼊了mode的概念，⽤于指定打包的⽬标环境，以便在打包的过程中启⽤webpack针对不同的环境下内置的优化
# 简化了HTML文件的创建，以便为你的webpack包提供服务
npm install html-webpack-plugin -D
# 目录清理
npm install clean-webpack-plugin -D
# loader
npm install --save-dev css-loader@4
npm install style-loader@2 -D
// webpack的配置文件
const { resolve, format } = require("path")
const htmlwebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const miniCssPlugin = require("mini-css-extract-plugin")
// webpack是基于nodeJS
// 原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接
module.exports = {
// 入口
// spa：单页面应用
// mpa：多页面应用 多入口 对应 多出口
// entry: "./src/index.js",
entry: {
// index: modules = [index.js, a.js] = [chunk, chunk] = chunks
// index == chunkName
index: "./src/index.js", // index.js a.js index.css
login: "./src/login.js" // login.js
},
// 出口
output: {
// 生成的资源存放的位置, 必须是绝对路径
path: resolve(__dirname, './build') ,
// 生成的资源文件名
// filename: 'index.js' // 占位符 [name]
filename: '[name].js' // 占位符 [name]
},
mode: "development", // none（既无开发体验，也无优化） development（开发体验） production(优化)
module: {
rules: [
{
test: /\.css$/,
// use: ['style-loader', 'css-loader'] // 执行顺序：自后往前
use: [miniCssPlugin.loader, 'css-loader'] // 执行顺序：自后往前
}
]
},
plugins: [
new CleanWebpackPlugin(), // 目录清理
new miniCssPlugin({
filename: "index.css"
}), // 样式抽取成独立的文件
new htmlwebpackPlugin({
template: "./src/public/index.html",
filename: "index.html",
chunks: ["index"]
}),
new htmlwebpackPlugin({
template: "./src/public/login.html",
filename: "login.html",
chunks: ["login"]
}),
],
}
