webpack打包demo
程序员文章站
2024-03-23 12:23:28
...
Webpack 打包我的第一个demo
环境安装：node.js、npm、webpack
1.创建项目文件夹：
在cmd输入mkdir myProject
执行成功：
2.进入项目文件夹：cd myProject
3.创建package.json文件：npm init
可填可不填的内容我选择了回车。。
最后输入yes回车
生成package.json文件
4.安装一些项目依赖的包到node_modles文件夹内：npm install webpack –save-dev
如果觉得npm慢可以选择cnpm。
5.创建一个静态页面index.html以及src/app.js: 自行手动创建
文件目录如下：
Index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack demo</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>app.js代码：
document.write("My webpack demo~")6.执行指令：webpack –mode development src/app.js –output-filename bundle.js –output-path dist
关于这条指令的理解：
文件位置：src/app.js
输出路径：dist/bundle.js
执行这条指令：
执行后文件目录中新增 dist/bundle.js
浏览器查看index.html:
上一篇： 学习Java第十八天