Webpack是一款用于打包JavaScript应用程序的工具,它可以将多个JavaScript文件打包成单个文件。在本文中,我们将使用一个简单的hello world项目来学习Webpack。
步骤1:创建一个基本的hello world项目
首先,我们需要创建一个基本的hello world项目。这个项目将包含一个index.html文件和一个app.js文件。index.html文件将包含一个div元素,而app.js文件将在页面加载时向这个div元素中插入一条消息。
以下是index.html文件的内容:
--------- ----- ------ ------ ------------ ------------- ------- ------ ---- ------------------- ------- ---------------------- ------- -------
以下是app.js文件的内容:
--- ------- - ------- -------- -------------------------------------------- - --------
在浏览器中打开index.html文件,你将看到一条消息:“Hello, world!”。
步骤2:安装Webpack
接下来,我们需要安装Webpack。在终端中执行以下命令:
--- ------- ------- ----------- ----------
这会将Webpack及其CLI(命令行界面)安装到项目的开发依赖中。
步骤3:配置Webpack
现在我们需要创建一个Webpack配置文件。在项目根目录下创建一个名为webpack.config.js的文件,并添加以下内容:
----- ---- - ------- ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------