下载webpack
使用命令下载webpack相关插件
npm install webpack -g
npm install webpack-cli -g
查看版本号,显示出具体版本则下载成功
webpack -v
webpack-cli -v
使用vue进行模块化开发
新建hello.js暴露方法供其他js引用,可防止原生 < script >< /script > 标签引入多个js方法重名的问题。
//hello.js
//暴露一个方法
exports.sayHi = function(){
document.write("<h1>学习webpack</h1>")
}
新建main.js引入hello.js,则可以使用hello.js中的方法。
//main.js
//引入hello.js存放在变量hello中
let hello = require("./hello")
hello.sayHi();
新建webpack.config.js,注意名字一定要对,否则报错。
//配置打包目录
module.exports = {
//入口
entry: './modules/main.js',
//打包出口
output: {
filename: "./js/bundle.js"
}
};
Terminal 输入webpack,自动打包,生成bundle.js。或者输入webpack --watch可以打包后继续监听,实现热部署
新建index.html,导入打包后的js,进行测试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js">
</script>
</body>
</html>
热部署实时更新页面内容,输入 学习webpack。