这是整体的文件目录结构
js是打包后生成的文件夹,bundle.js是打包之后的js文件。我们做一个简单的模块,进行webpack操作之后只需导入一个js文件即可。
main.js
var hello = require("./hello")
hello.sayHi
hello.js
exports.sayHi= function () {
document.write("<h1>张君倩</h1>")
}
webpack的配置文件:webpack.config.js(必须叫这个名字要不然找不到!)
module.exports = {
entry: './modules/main.js',
output: {
filename: './js/bundle.js'
}
};
然后再命令行敲webpack按回车打包就完成了。
最后我们新创建一个页面index.html导入bundle.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/bundle.js"></script>
</body>
</html>