全攻略：webpack 高级自定义配置，探索多入口多出口打包奥秘

2023-09-23 11:25:32

当然可以，请看这里：

webpack 高级自定义配置指南

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。它允许您将多个 JavaScript 模块组合成单个文件，以便在浏览器中运行。webpack 也支持许多其他特性，例如代码分割、热重载和按需加载。

手动配置 webpack

默认情况下，webpack 使用一个名为 webpack.config.js 的配置文件。这个文件允许您自定义 webpack 的行为。您可以使用它来指定要打包的入口文件、要生成的输出文件以及要使用的插件。

要手动配置 webpack，您需要创建一个 webpack.config.js 文件并将其添加到您的项目中。然后，您需要使用以下命令运行 webpack：

npx webpack

这将使用您的自定义配置构建您的应用程序。

多入口多出口打包

webpack 允许您将多个入口文件打包成多个输出文件。这对于创建具有不同入口点的应用程序非常有用，例如具有多个页面的 Web 应用程序。

要使用多入口多出口打包，您需要在 webpack.config.js 文件中指定 entry 和 output 选项。entry 选项指定要打包的入口文件，output 选项指定要生成的输出文件。

module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

这将创建一个名为 main.bundle.js 的文件和一个名为 vendor.bundle.js 的文件。main.bundle.js 文件将包含 main.js 文件中的代码，vendor.bundle.js 文件将包含 vendor.js 文件中的代码。

HTMLWebpackPlugin 插件

HTMLWebpackPlugin 是一个 webpack 插件，它允许您自动将打包后的 JavaScript 和 CSS 文件添加到 HTML 文件中。这对于创建生产就绪的 Web 应用程序非常有用。

要使用 HTMLWebpackPlugin，您需要在 webpack.config.js 文件中安装并配置它。

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

module.exports = {
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

这将在您的 dist 目录中创建一个名为 index.html 的文件。该文件将包含 main.bundle.js 和 vendor.bundle.js 文件。