返回

初探Webpack的世界：用原生的方式构建Web应用

前端

在踏入Webpack的奇妙世界之前，让我们先用最原始的方法构建一个Web应用，以便更好地理解Webpack的强大之处。让我们从头开始，一步一步地构建一个简单的Web应用。

在纯净的环境中构建Web应用

首先，让我们创建一个新的文件夹来存放我们的项目，并将这个文件夹命名为“webpack-demo”。然后，打开你最喜欢的代码编辑器，并创建一个名为“index.html”的文件。在这个文件中，输入以下代码：

<!DOCTYPE html>
<html>
  <head>
    
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h1>欢迎来到我的Web应用</h1>
    <p>这是我的第一个Web应用，我很高兴与你分享。</p>
  </body>
</html>

接下来，我们创建一个名为“style.css”的文件，并输入以下代码：

body {
  background-color: #ffffff;
  font-family: Arial, sans-serif;
}

h1 {
  color: #000000;
  font-size: 24px;
}

p {
  color: #000000;
  font-size: 16px;
}

最后，创建一个名为“script.js”的文件，并输入以下代码：

console.log('Hello, world!');

现在，打开终端，导航到“webpack-demo”文件夹，并运行以下命令：

npx webpack

这将生成一个名为“bundle.js”的文件，该文件包含了“script.js”中的代码。将这个文件复制到“webpack-demo”文件夹中。

现在，你可以使用任何浏览器打开“index.html”文件，你的Web应用就可以正常运行了。

总结

通过这个简单的例子，你已经学会了如何用原生方式构建一个Web应用。在这个过程中，你学习了如何创建HTML、CSS和JavaScript文件，以及如何使用Webpack将它们打包成一个文件。这只是Webpack学习之旅的开始，在接下来的文章中，我们将深入探索Webpack的更多功能。