以不变应万变，Webpack 一次性开发环境搭建全攻略

前言

Webpack 是一个用于构建模块化 JavaScript 应用程序的现代构建工具。它可以将许多小的 JavaScript 模块打包成更少的、可复用的代码块，从而提高应用程序的性能和可维护性。Webpack 还支持多种功能，如代码分割、热重载和树形摇动，这些功能可以帮助开发人员提高应用程序的开发效率。

使用 html-webpack-plugin 产生 index.html

在使用 Webpack 构建 JavaScript 应用程序时，通常需要一个 HTML 文件来将 JavaScript 代码引入到网页中。我们可以使用 html-webpack-plugin 这个插件来自动生成这个 HTML 文件。

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

上面的代码展示了如何使用 html-webpack-plugin 插件。首先，我们需要安装 html-webpack-plugin 插件。然后，在 Webpack 配置文件中，我们需要配置 plugins 选项，并将其设置为 HtmlWebpackPlugin 的实例。HtmlWebpackPlugin 的构造函数接收一个参数 template，它指定了 HTML 模板文件的路径。

当我们运行 Webpack 时，html-webpack-plugin 插件会自动生成 index.html 文件。这个文件将包含一个 <script> 标签，其中引入了 bundle.js 文件。

配置改变时自动重新建置

Webpack 提供了一个非常方便的功能，那就是它可以自动检测配置文件的更改，并在更改发生时重新构建应用程序。这个功能可以大大提高开发效率，因为它可以帮助开发人员及时发现并修复错误。

为了启用自动重新构建功能，我们需要在 Webpack 配置文件中设置 watch 选项为 true。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  watch: true,
};

当我们运行 Webpack 时，它会进入监视模式。在这个模式下，Webpack 会监视配置文件和源文件的变化。如果检测到任何变化，Webpack 就会自动重新构建应用程序。

由于 Dev Server 的监听范围仅限专案的内容，并不包括其他的

Webpack 的 Dev Server 是一个用于在开发过程中提供本地服务器的工具。它可以帮助开发人员在本地测试应用程序，并可以自动重新加载应用程序。

但是，Webpack 的 Dev Server 的监听范围仅限于项目的内容。这意味着它不会监视其他文件或目录的变化。如果我们想要监视其他文件或目录的变化，我们需要使用其他的工具。

我们可以使用 chokidar 这个工具来监视其他文件或目录的变化。

const chokidar = require('chokidar');

chokidar.watch('./src', {
  ignored: /(^|[\/\\])\..*/,
}).on('change', (path) => {
  console.log(`File ${path} changed.`);
});

上面的代码展示了如何使用 chokidar 来监视 ./src 目录下的文件的变化。当检测到文件变化时，chokidar 会触发 change 事件。我们可以在 change 事件的处理函数中执行相应的操作，比如重新构建应用程序。

结论

Webpack 是一个非常强大的构建工具，它可以帮助开发人员构建出更高质量的 JavaScript 应用程序。通过使用 html-webpack-plugin 插件，我们可以自动生成 index.html 文件。通过设置 watch 选项为 true，我们可以启用自动重新构建功能。通过使用 chokidar 工具，我们可以监视其他文件或目录的变化。这些功能可以帮助开发人员提高开发效率，并可以使应用程序更加健壮。