最近突然发现前端特别好玩,就当做给自己放个小假,试着记一点前端的笔记。
自学vue.js时遇到的webpack项目配置,感觉操作有点琐碎,而且由于笔者看的教程的年代比较久远,许多步骤和指令都已经有变化。
此处以在vscode环境下构建webpack项目为例
- 创建文件夹,用vscode打开文件夹。
- 在命令行内输入npm init -y(注意,打开的文件夹和以后内部创建的文件都必须是英文,否则会报错);通过npm init -y 生成项目的配置文件package.json。(-y中的y是yes的缩写)
![f4d9678ff02a46b73c8dfe974a89be17.png](https://img-blog.csdnimg.cn/img_convert/f4d9678ff02a46b73c8dfe974a89be17.png)
3. 在目录中如此创建文件结构:
![72f8c70072d356466028f049851f9c70.png](https://img-blog.csdnimg.cn/img_convert/72f8c70072d356466028f049851f9c70.png)
然后我们在main.js中随便写一句测试代码:
//main.js
console.log("hello world")
4. 全局安装webpack,在命令行中执行 npm I webpack -g;然后在项目中测试webpack,将main.js装换成bundle.js(全局打包),指令为webpack ./src/main.js -o ./dist/bundle.js
![a2d784abf99bad24ad313df9807b7b13.png](https://img-blog.csdnimg.cn/img_convert/a2d784abf99bad24ad313df9807b7b13.png)
5. 在index.html文件中导入bundle.js文件作为脚本代码