什么是webpack

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文件。