webpack学习笔记(2)
2018-11-07 本文已影响0人
GU_0539
webpack的使用方式
- 自己手写配置
- webpack配置
- 第三方脚手架 Vue-Cli Angular-Cli React-Starter
webpack-cli 可以关注一下
cmd下 code ./ 直接打开VsCode
webpack的简单应用
新建两个js文件
sum.js
export default function (a,b){
return a+b
}
app.js
import sum from './sum'
console.log("sum(10,20)"+ sum(10,20))
控制台输入webpack app.js bundle.js指定entry入口文件和出口文件
webpack app.js bundle.js
image.png
目录下就看到生成了一个bundle.js文件
image.png
这时再新建一个index.html文件，把生成的bundle文件引入进去
<!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="./bundle.js"></script>
</body>
</html>
查看浏览器控制台输出,这样一个简单的webpack打包就完成了
image.png
