webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
一、webpack的概念
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
二、webpack的配置项
1、entry (入口)
entry指定了webpack应该使用哪个模块，作为构建起内部依赖图的开始，进入入口起点后，webpack会找出有哪些模块和库是入口起点依赖的，entry配置的默认值是’./src/index.js’，我们可以配置多个入口：
{
entry: {
index: {
import: './src/index.js',
dependOn: 'shared'
},
print: {
import: './src/print.js',
dependOn: 'shared'
},
shared: 'lodash'
}
}在这个配置中用到了import和dependOn两个字段，他们的含义如下：
- import：表示启动时需要加载的模块
- dependOn：当前入口所依赖的入口，它们必须在该入口被加载之前加载 除了这两个属性以外，还支持其他几个配置项
- filename：指定要输出的文件名称
- library：为当前entry创建一个library
- runtime：运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
注意点：
- runtime和dependOn不应该在同一个入口上同时使用，否则会抛出错误
- runtime 不能指向已存在的入口名称
- dependOn 不能是循环引用的
2、output (输出)
output选项用来告知webpack如何向硬盘写入编译文件，output只能指定一个。
{
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
publicPath: '/'
}
}clear:true表示每次打包之前会清空之前dist目录下的所有打包文件。
3、loader（加载器）
loader用于对模块的源代码进行转换，可以在加载模块时对文件进行预处理，直接将文件从不同的语言转换为JavaScript或者将内联图形转换为data url。
{
module: {
rules: [
{
test: /\.css/i,
use: [
'style-loader', 'css-loader'
]
},
{
test: /\.(png|svg|jpg|jpeg|gif$)/i,
type: 'asset/resource'
},
{
test: /\.(woff|woff2|eot|ttf|otf$)/i,
type: 'asset/resource'
},
{
test: /\.(csv|tsv)/,
use: ['csv-loader']
},
{
test: /\.xml$/i,
use: ['xml-loader']
}
]
}
}示例中的配置添加了对各种类型的静态资源文件的处理loader，可以用来处理 CSS、图片、字体等静态资源。
4、plugin(插件)
插件用于解决loader无法实现的其他事情，它是webpack的支柱功能，在示例中我们使用了HtmlWebpackPlugin这个插件，用于生成和定义入口文件index.html。
{
plugins: [
new HtmlWebpackPlugin({
title: 'development'
})
]
}延伸阅读1：Webpack的工作方式
把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
