《React+Redux前端开发实战》—1.1.4 第一个Webpack构建实战
【摘要】 本节书摘来自华章计算机《React+Redux前端开发实战》一书中的第1章，第1.1.4节，作者是徐顺发.
1.1.4 第一个Webpack构建实战
本节将构建一个很简单的项目，重点是让读者先了解Webpack。新建项目app（一个空目录），并以此为根目录。
使用Webpack构建项目示例：
（1）在根目录下新建文件index.html，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>document</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
（2）新建文件a.js，内容如下：
document.write("It works from a.js");
此时目录结构为：
.
├── a.js
└── index.html
（3）在根目录下执行如下命令（Webpack 4以上版本）：
webpack a.js -o bundle.js
提示：如果是Webpack 4以下版本，则不需要-o参数，但需要webpack.config.js配置文件。
Webpack会根据模块的依赖关系进行静态分析，模块a.js被打包为bundle.js。终端效果如图1.3所示，同时根目录下会生成一个新的文件./bundle.js。
图1.3 Webpack编译文件
提示：如果Webpack构建不成功，第一，查看源码中是否有特殊字符；第二，查看Webpack版本号。Webpack4版本开始的构建命令略有不同。
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）