初探Webpack 5：搭建项目，了解核心配置

引言

Webpack 是一个现代化的 JavaScript 模块打包器，可以将许多小的模块组合成更大的、更适合生产的模块。它可以帮助我们管理项目中的所有 JavaScript 代码，包括处理依赖关系、代码压缩、优化等。

Webpack 5 是最新版本，它带来了许多新特性和改进。在本文中，我们将从头开始创建一个 Webpack 5 项目，并逐步了解其基本配置、安装本地服务、引入 HTML 编译模板等知识。

1. 项目搭建

首先，我们创建一个新的文件夹，并将它命名为 "my-webpack-project"。然后，在该文件夹中，创建一个名为 "package.json" 的文件，并输入以下内容：

{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "description": "A simple Webpack 5 project",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^4.0.0",
    "html-webpack-plugin": "^5.0.0"
  }
}

接下来，使用命令行工具 "npm" 安装项目所需的依赖包：

npm install

2. 基本配置

现在，我们来配置 Webpack。在 "my-webpack-project" 文件夹中，创建一个名为 "webpack.config.js" 的文件，并输入以下内容：

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

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

在这个配置文件中，我们指定了项目入口文件（entry）、输出文件（output）和插件（plugins）。

3. 安装本地服务

为了方便开发，我们安装一个本地服务。在命令行工具中，输入以下命令：

npm install -D webpack-dev-server

然后，在 "package.json" 文件中，添加以下脚本：

"scripts": {
  "start": "webpack-dev-server"
}

现在，我们可以通过运行 "npm start" 命令来启动本地服务。

4. 引入 HTML 编译模板

为了能够在 HTML 文件中引入 JavaScript 代码，我们需要使用 HTML 编译模板。在命令行工具中，输入以下命令：

npm install -D html-webpack-plugin

然后，在 "webpack.config.js" 文件中，添加以下代码：

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

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  })
]

5. 知识点脑图

为了更好地理解 Webpack 5 的基本概念和知识点，我们制作了一张知识点脑图：

[知识点脑图链接]

总结

通过本文，我们从头开始创建了一个 Webpack 5 项目，了解了基本配置、安装本地服务、引入 HTML 编译模板等知识。希望对大家有所帮助。