教程 > Webpack 教程 > Webpack 教程 阅读：328

Webpack 第一个简单应用

本章节我们通过一个简单的示例来介绍webpack的使用。

本章节的示例继续使用 webpack 安装 一章中创建的项目webpack-example。

从现在开始我们使用 npm。除了作为包管理器之外，npm 还可以用作简单的任务运行器。 我们可以通过在 package.json 文件的脚本部分包含我们的任务名称及其说明来创建 webpack 任务。 让我们现在试试这个。 打开 package.json 并将脚本对象更改为以下内容：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

在 scripts 属性中，npm 允许我们通过名称引用本地安装的 Node.js 包。 我们使用它和 --mode 标志来定义开发和构建任务，它们将分别在开发（npm run dev）和生产（npm run build）模式下运行 webpack。

在测试我们刚刚创建的任务之前，让我们创建一个 src 目录并在其中创建 index.js 文件，该文件内容如下 。

index.js

console.log("Hello, Webpack!");

此时我们的webpack的项目目录如下

![webpack 项目目录(/uploads/210927/I_20210927212000c925e8.jpg)

现在我们已经可以运行 dev 任务来在开发模式下启动 webpack：

$ npm run dev

> webpack-example@1.0.0 dev /Users/jiyik/workspace/js/webpack-example
> webpack --mode development

asset main.js 1.22 KiB [emitted] (name: main)
./src/index.js 31 bytes [built] [code generated]
webpack 5.54.0 compiled successfully in 75 ms

webpack 项目 npm run dev

运行之后，webpack项目当前的目录结构如下

打包之后 webpack 项目目录

现在我们可以看到在项目目录中多了一个 dist 文件夹，并且该文件夹下多了 main.js 文件。该文件内容如下

main.js

/******/ (() => { // webpackBootstrap
/******/     var __webpack_modules__ = ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ (() => {

eval("console.log(\"Hello WebPack!!\");\n\n//# sourceURL=webpack://webpack-example/./src/index.js?");

/***/ })

/******/     });
/************************************************************************/
/******/     
/******/     // startup
/******/     // Load entry module and return exports
/******/     // This entry module can't be inlined because the eval devtool is used.
/******/     var __webpack_exports__ = {};
/******/     __webpack_modules__["./src/index.js"]();
/******/     
/******/ })()
;

很好，到现在为止都在按预期工作。 但是为了验证我们得到了正确的输出，我们需要在浏览器中显示结果。 为此，让我们在 dist 目录中创建一个 index.html 文件：

index.html

<!doctype html>
<html>
  <head>
    <title>Webpack —— 迹忆客</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

现在，如果我们在浏览器中打开 index.html 文件，我们应该会在 console 控制台 中看到 Hello, Webpack!！ 。

webpack 第一个应用运行结果

到现在为止一切看起来都还挺好。 但是在某些情况下，手动编写我们的 index.html 文件可能会出现问题。 例如，如果我们更改入口点的名称，生成的包将被重命名，但我们的 index.html 文件仍将引用旧名称。 因此，每次重命名入口点或添加新入口点时，我们都需要手动更新 HTML 文件。

在下一篇文章 webpack html 打包详细 中我们会看到如何避免上面的问题。

查看笔记

扫码一下
查看教程更方便