Webpack 入门：第 1 部分

1. 什么是Webpack

Webpack是一个现代化的JavaScript应用程序的静态模块打包器(module bundler)。

静态模块打包器通过分析模块之间的依赖关系来打包JavaScript应用程序。此外，Webpack还可以通过插件功能来处理其他类型的资源（如CSS、图片和字体等）。

它可以将多个模块打包成一个或多个捆绑包（bundle），这些捆绑包可以在浏览器中使用。

下面我们来看看如何使用Webpack搭建一个基本的JavaScript应用程序。

2. 安装Webpack

要使用Webpack，首先需要安装Node.js。然后通过以下命令安装Webpack：

npm install webpack --save-dev

安装完成后，通过以下命令测试是否成功：

webpack --version

如果显示版本号，则表示安装成功，否则需要重新安装。

3. 创建项目

接下来，我们要创建一个Webpack项目。首先，在您的计算机上创建一个新文件夹:

mkdir webpack-demo

进入文件夹并使用以下命令将其转化为Node.js项目：

cd webpack-demo

npm init -y

接着，我们安装Webpack的依赖项：

npm install webpack webpack-cli --save-dev

4. 搭建基本结构

在项目根目录中，创建一个叫做src的文件夹，并在该文件夹内创建两个JavaScript文件：main.js和module1.js。

在module1.js中，定义一个打印“Hello, World!”的函数：

export function hello() {

  console.log('Hello, World!');
}

在main.js中，使用ES6的导入语法将module1.js中的函数引入并调用它：

import { hello } from './module1.js';

hello();

5. 配置Webpack

现在我们已经有了一个简单的应用程序，但我们需要Webpack来将其打包成一个JavaScript文件。

为此，我们需要创建一个叫做webpack.config.js的文件，并将以下内容加入其中：

const path = require('path');

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

在这个配置文件中，我们定义了Webpack的入口文件（即main.js）和输出文件（即bundle.js）。注意，我们将输出文件放在一个叫做dist的文件夹中。

6. 运行Webpack

现在我们已经准备好使用Webpack构建我们的应用程序了。

在终端中，输入以下命令来构建我们的应用程序：

npx webpack --mode development

运行此命令后，Webpack将从入口文件开始构建我们的应用程序，并将所有的依赖打包成一个捆绑包。

最后，我们在浏览器中打开dist/index.html文件，查看我们的应用程序是否可以正常运行。

7. 结论

在这篇文章中，我们介绍了Webpack的基本概念并演示了如何使用Webpack构建一个简单的JavaScript应用程序。如果您还没有使用过Webpack，希望这篇文章可以帮助您入门Webpack。