webpack项目目录结构_webpack项目配置流程

最近突然发现前端特别好玩，就当做给自己放个小假，试着记一点前端的笔记。

自学vue.js时遇到的webpack项目配置，感觉操作有点琐碎，而且由于笔者看的教程的年代比较久远，许多步骤和指令都已经有变化。

---

此处以在vscode环境下构建webpack项目为例

1. 创建文件夹，用vscode打开文件夹。
2. 在命令行内输入npm init -y（注意，打开的文件夹和以后内部创建的文件都必须是英文，否则会报错）；通过npm init -y 生成项目的配置文件package.json。（-y中的y是yes的缩写）

运行结果中可以看出项目的信息

3. 在目录中如此创建文件结构：

dist下的bundle.js文件是在下一步生成的，不要我们创建

然后我们在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