webpack的简单实用
什么是webpack
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
简单的来说,WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
demo
完成一个demo ,简单测试一下webpack的打包功能。
首先配置webpack环境
建立一个vue项目
直接建一个文件夹即可,然后用IDEA打开。
1.简历modules文件夹
在modules文件夹中创建hello.js和main.js。
hello.js中用于暴露方法
//暴露一个方法
exports.sayHi=function (){
document.write("<h1>java ES6</h1>")
}
main.js导入hello中的方法。
var hello=require("./hello");
hello.sayHi();
注意,上面是ES5的写法,ES6用export导出,import导入
2.创建webpack.config.js
module.exports={
entry:'./modules/main.js',
output:{
filename:"./js/bundle.js"
}
};
3.在终端输入webpack命令进行打包
打包成功后会出现js目录
4.新建一个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>
运行后的结果