下面主要做一个示例,来说明当有多个js文件的时候,如何打包。
-
我们还是建立如下的目录及内容:
*index.html*
<!DOCTYPE html>
<html>
<body>
<title>webpack初试</title>
<meta charset="utf-8">
<script type="text/javascript" src="bundle.js"></script>
</body>
<body>
</body>
</html>
*subMethod.js*
function tryStr() {
return '这是webpack第二次尝试,目的是多个依赖文件的打包'
}
module.exports = tryStr
*main.js*
var tryStr = require('./subMethod.js')
document.write(tryStr())
其中,subMethod.js里面是一个tryStr方法,返回一个字符串,然后将这个方法export出去。
在main.js中引入subMethod.js,并且调用tryStr方法让其内容显示在界面上。
b、然后我们运行在控制台运行webpack main.js bundle.js后,文件夹中会生成bundle.js,并且运行index.html会出现如下结果:
这里只是一个简单的例子,大家可以拓展一下,比如添加json串的子方法,添加更多的依赖关系文件,去做更多的尝试。我也在学习中,共勉。
下一节一起学习样式的打包。