上一篇文章中出现的错误，其实可以基于 webpack 把这种有兼容性的代码转换成没有兼容性的代码，再引入转换之后的 js 文件就可，具体实现如下：
1. 安装包
在终端中运行如下命令，安装 webpack 相关的包
npm install webpack webpack-cli -D
2. 创建配置文件
在项目的根目录中，创建 webpack.config.js 的 webpack 配置文件,并且初始化如下配置：
module.exports = {
mode: 'development' //mode用来指定构建模块
}
3. 新增脚本
在 package.json 配置文件中的 package.json scripts 节点下，新增 dev 脚本，(原有脚本保留):
'scripts': {
'dev': 'webpack' // script 节点下的脚本，可以通过 npm run 执行
}
4. 项目打包
在终端中运行如下命令，启动 webpack 进行项目打包
npm run dev
打包完成之后，会自动创建一个 dist 文件夹，里面包含 一个 main.jsn ,此时再回到 src -> index.html 中，重新引入 打包之后的 js文件，代码如下图：
<!DOCTYPE html>
<html lang="en">
<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>
<!-- 传统模式是如下引入，但是我们要用模块化思维 -->
<!-- <script src="./index.js"></script> -->
<script src="../dist/main.js"></script>
</head>
<body>
<ul>
<li>这是第 1 个li</li>
<li>这是第 2 个li</li>
<li>这是第 3 个li</li>
<li>这是第 4 个li</li>
<li>这是第 5 个li</li>
<li>这是第 6 个li</li>
<li>这是第 7 个li</li>
<li>这是第 8 个li</li>
<li>这是第 9 个li</li>
</ul>
</body>
</html>
此时再运行 index.html 文件就不会报错，运行结果如下图：
这就是 webpack 最基本的安装与配置，但是在完整的项目中，可能需要你去修改默认的出入口，那要如何配置呢？请看下一篇文章 webpack的配置汇总