初学者眼中的 Webpack

搭建Webpack环境

1. 安装 Node.js

• 前往 Node.js 官网下载并安装 Node.js。

2. 安装 Webpack

• 打开命令行工具，输入以下命令安装 Webpack：

  npm install webpack --save-dev
  

3. 创建项目文件夹

• 在你的计算机上创建一个新文件夹，用于存放你的项目。

4. 初始化项目

• 在项目文件夹中，运行以下命令初始化一个新的 npm 项目：

  npm init -y
  

5. 创建 webpack.config.js 文件

• 在项目文件夹中，创建一个新的 JavaScript 文件，命名为 webpack.config.js。

配置Webpack

1. 配置入口文件

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

  module.exports = {
    entry: './src/index.js',
  };
  

• entry 属性指定了 Webpack 的入口文件，在本例中为 src/index.js。

2. 配置输出文件

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

  module.exports = {
    // ...
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
  

• output 属性指定了 Webpack 的输出文件，在本例中为 dist/bundle.js。

运行Webpack

1. 运行 Webpack

• 在项目文件夹中，运行以下命令运行 Webpack：

  npm run webpack
  

• 如果你已经安装了 Webpack，那么你也可以直接运行以下命令：

  webpack
  

2. 查看输出文件

• Webpack 运行完成后，你可以在 dist 文件夹中找到 bundle.js 文件。这个文件包含了打包后的 JavaScript 代码。

总结

现在，你已经成功地创建了一个简单的 Webpack 配置，并使用它来打包你的 JavaScript 代码。通过本指南，你已经掌握了 Webpack 的基本原理和使用方法。你可以继续探索 Webpack 的其他高级功能，比如代码分割、模块热更新等等，以充分发挥 Webpack 的强大潜力。