一、文件结构
二、index.html
<!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>
</head>
<body>
<!-- 原始的引入做法
缺陷：相关联的依赖有多少，你就需要引入多少
-->
<!-- <script src="../js/base.js"></script>
<script src="../js/home.js"></script> --> <!-- 使用webpack好处：
它帮你生成一个管理所有依赖的js文件，你只需要引入这一个js文件就可以了
-->
<script src="../dist/home.bundle.js"></script>
</body>
</html>
三、signup.html
<!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>
</head>
<body> <!-- 原始的引入做法
缺陷：相关联的依赖有多少，你就需要引入多少
-->
<!-- <script src="../js/base.js"></script>
<script src="../js/signup.js"></script> --> <!-- 使用webpack好处：
它帮你生成一个管理所有依赖的js文件，你只需要引入这一个js文件就可以了
-->
<script src="../dist/signup.bundle.js"></script>
</body>
</html>
四、base.js
// 注册功能是否开放
var open = true; // ES6语法
export {open}
五、home.js
// ES6语法
import {open} from './base'; if(open){
document.body.innerHTML = '<a href="signup.html">注册</a>'
}
六、signup.js
// ES6语法
import {open} from './base'; if(open){
document.body.innerHTML =
`
<h1>
欢迎入坑
</h1>
` }else{
document.body.innerHTML =
`
<h1>
暂不开放注册
</h1>
`
}
七、package.json
八、webpack.config.js
module.exports = {
// 两个入口文件
entry:{
home:'./js/home.js',
signup:'./js/signup.js'
},
// 出口文件
output:{
// [name]是动态的，其中name指向entry对象的key
filename:'[name].bundle.js',
// 注意：__这是两个英文下划线！
// 出口文件保存在当前目录下的dist目录下。注：dist指distribution 分发的意思
path:__dirname + '/dist'
}
}
九、在命令行终端使用以下命令
npm run pack
十、index.html在浏览器运行效果
点击注册后
最后，欢迎观看，如有疑问，欢迎交流哦