一、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创建一个libraryruntime：运行时 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文件。