最近突然发现前端特别好玩,就当做给自己放个小假,试着记一点前端的笔记。
自学vue.js时遇到的webpack项目配置,感觉操作有点琐碎,而且由于笔者看的教程的年代比较久远,许多步骤和指令都已经有变化。
此处以在vscode环境下构建webpack项目为例
- 创建文件夹,用vscode打开文件夹。
- 在命令行内输入npm init -y(注意,打开的文件夹和以后内部创建的文件都必须是英文,否则会报错);通过npm init -y 生成项目的配置文件package.json。(-y中的y是yes的缩写)
![50c1938974c8af7b9e0e835981634115.png](https://i-blog.csdnimg.cn/blog_migrate/48c5d5a993b0c621622a793d1c3b4843.jpeg)
3. 在目录中如此创建文件结构:
![2bc9f3fe4ec82a1b91e699ae5caa22e0.png](https://i-blog.csdnimg.cn/blog_migrate/16bb200884404252f6fdb894b9e3976d.jpeg)
然后我们在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
![0951133ca5b20ef0e19e3118bc0f2a00.png](https://i-blog.csdnimg.cn/blog_migrate/bf401f4891bbc427af1d4804b179ade2.jpeg)
5. 在index.html文件中导入bundle.js文件作为脚本代码