Webpack4.x的四个核心概念介绍

Webpack4.x 是一款常用的 JavaScript 模块打包工具，为我们提供了便捷的前端开发解决方案，这里我们将重点介绍 Webpack4.x 的四个核心概念。

一、Entry（入口）

Entry 是 Webpack4.x 打包时的入口文件，它指定了用哪个文件作为 Webpack 打包的起点。当 Webpack 从 Entry 开始打包时，会递归地解析出该入口文件所依赖的所有模块，然后将它们打包成一个或多个单独文件。Entry 通常可以是一个或多个 JavaScript 文件，也可以是一个模板或者一个 CSS 样式表，例如：

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['react', 'react-dom', 'lodash']
  }
};

在上面的代码中，我们设置了两个入口文件，一个是 main.js，另一个是 vendor.js，分别指定了程序的逻辑部分和所依赖的第三方库。

二、Output（输出）

Output 是 Webpack4.x 打包后文件的输出配置，它定义了打包后所有文件的输出目录、文件名和资源路径等信息。Output 可以使用占位符来动态地确定文件名和路径，例如：

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[hash].js',
    publicPath: '/'
  }
};

在上面的配置中，我们设置了打包后的文件输出目录为 dist，文件名为 bundle.4fa0c1b9127f1c0f49dd.js，并且指定了公共路径为 /。

三、Loader（加载器）

Webapck4.x 默认只能打包 JavaScript 模块，而其它类型的文件（比如 CSS, 图片，字体等）需要用到 Loader 进行处理和转换。Loader 用来将一些非 JavaScript 模块转化为 Webpack 可以处理的模块，它们本身是一个函数或一段脚本，用于对模块的源代码进行转换，例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};

上述代码配置了两个 Loader，一个是处理 CSS 样式表的 Loader，一个是处理图片的 Loader。对于 CSS 样式表文件，我们将使用 style-loader 和 css-loader 将其转换为 JavaScript 模块，以便能够被 Webpack 处理。对于图片文件，我们将使用 file-loader 将其转换为 Webpack 需要的格式，并指定了图片输出的路径和文件名。

四、Plugin（插件）

Plugin 是 Webpack4.x 另一个重要的概念，它可以在 Webpack 打包的不同阶段执行一些特定的任务，例如压缩代码，拷贝文件，生成 HTML 等。Plugin 通常要在 Webpack 配置文件中引入，并作为一个数组传递给 plugins 配置项。例如：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './src/index.html'
    })
  ]
};

在上面的代码中，我们引入了 HTMLWebpackPlugin 插件，并在 plugins 数组中实例化了该插件。该插件的作用是生成 HTML 文件，用来展示 Webpack 编译后的程序。

以上就是 Webpack4.x 的四个核心概念，它们相互配合，构成了 Webpack 发挥强大功能的核心。