Webpack 4.0 进阶学习指南：一文彻底搞懂模块构建原理

前端

2023-11-09 15:03:48

Webpack 4.0 初探：打造你的第一个 Webpack 项目

准备好踏入 Webpack 的奇妙世界了吗？它是一款出色的打包工具，将帮助你轻松管理你的 JavaScript 应用程序。在本文中，我们将从头开始构建一个简单的项目，让你体验 Webpack 的强大功能。

一、项目结构：理清你的文件

为了让一切井井有条，我们需要一个清晰的项目结构。我们的项目将被称为 demo08，包含以下文件：

package.json： 你的项目信息中心
package-lock.json： 记录你的项目依赖关系
README.md： 关于项目的说明文档
src： 存放所有源代码的文件夹，包括：
- index.html：你的 HTML 入口文件
- index.js：你的 JavaScript 主文件
- style.css：你的样式表
webpack.config.js： Webpack 的配置中心

二、配置 Webpack：告诉它如何工作

现在是让 Webpack 为我们服务的时候了。在 webpack.config.js 中，输入以下代码：

const path = require('path');
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',
    }),
  ],
};

让我们逐行分解一下：

entry： 告诉 Webpack 从哪里开始打包（我们的 index.js）。
output： 指定打包后的文件（bundle.js）和输出目录（dist）。
plugins： 我们使用 HTMLWebpackPlugin 将 HTML 文件与我们的应用程序捆绑在一起。

三、安装依赖：获取所需工具

要使用 HTMLWebpackPlugin，我们需要安装它：

npm install --save-dev html-webpack-plugin

四、运行 Webpack：见证魔法

现在，准备见证 Webpack 的魔力：

npx webpack

五、探索输出目录：你的项目诞生了

在 dist 文件夹中，你会发现以下文件：

bundle.js： 我们的打包后 JavaScript 代码
index.html： 我们的 HTML 页面
style.css： 我们的样式表

六、添加 HTML：让页面动起来

在 index.html 中，添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Webpack</h1>
    <script src="./bundle.js"></script>
  </body>
</html>