从零开始学会 webpack 系列三：在探索中配置开发环境

webpack 是当下最热门的打包工具之一，它帮助我们在前端开发中实现代码的模块化、打包和优化。webpack 的配置过程对于新手来说可能会有些复杂，但它其实并不难掌握。在 webpack 系列三中，我们将学习如何配置开发环境，以便在开发过程中更轻松地进行调试和迭代。

首先，我们需要安装 webpack-dev-server。webpack-dev-server 是一个用于在开发环境中快速启动和运行 Webpack 项目的服务。它可以为你的项目提供一个本地服务器，支持热更新，并可以将代码分离为多个文件，便于调试。

yarn add webpack-dev-server -D

接下来，需要在项目根目录下创建 webpack.config.js 文件。这个文件用于配置 webpack 的各种选项。在 webpack.config.js 文件中，我们需要添加以下配置：

const path = require('path');

module.exports = {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

• mode: 表示当前正在运行的是开发模式。在开发模式下，webpack 会对代码进行各种优化，以提高开发效率。
• devServer: 表示开启 webpack-dev-server。
• contentBase: 指定webpack-dev-server 的文件目录，即 webpack 输出的目录。
• compress: 开启 gzip 压缩，可以减少代码的体积，提高加载速度。
• port: 设置端口号。

现在，我们可以运行 webpack-dev-server 了。在终端中输入以下命令：

npx webpack-dev-server

这样，webpack-dev-server 就会在 9000 端口上启动一个本地服务器。你可以通过浏览器访问 http://localhost:9000 来查看你的项目。

在开发过程中，当你修改代码后，webpack-dev-server 会自动重新编译代码并刷新浏览器，这使得开发变得更加高效。

webpack-dev-server 还支持热更新功能。当你修改代码后，webpack-dev-server 会只更新那些被修改的文件，而不会重新加载整个页面。这可以大大减少开发时间。

在webpack-dev-server 中，代码分离是一个非常有用的功能。它可以将代码拆分为多个文件，以便在浏览器中并行加载。这可以提高页面的加载速度。

在 webpack.config.js 文件中，我们可以通过以下配置来启用代码分离：

module.exports = {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

这样，webpack-dev-server 就会将代码拆分为多个文件，并将其加载到浏览器中。

好了，这就是本篇文章的主要内容。希望它能帮助你配置 webpack 的开发环境。如果你还有任何问题，请随时在评论区留言。