mmall前端项目初始化总结

关于前端项目的初始化以及webpack打包处理的操作知识总结。

第一步：创建src源文件夹

• src 项目源代码存放的位置
• dist 存放项目打包之后的文件

第二步： 同步远程库，创建.gitignore文件

• 创建.gitignore
• vim .gitignore
• :wq(保存并退出)
• 修改.gitignore中的忽略的文件（.DS_Store）
• git status 无法找到.DS_Store，说明.gitignore配置文件成功

第三步： 创建dev开发分支

• git check -b mmall_company （创建并切换到mmall_company分支，所有的代码在此分支进行开发）

第四步： 项目脚手架搭建

• npm init （生成package.json文件）
• npm install （生成node_modules文件夹）
• npm uninstall （删除node_modules文件夹）

第五步：wepack

webpack的设计思想： require anything
webpack安装
- npm install webpack -g （全局安装webpack）
- webpack -v （查看webpack版本号）

webpack.config.js配置
主要对webpack.config.js的配置来完成对项目src文件的打包，并生成dist文件。
包括对html，css，img，iconf-font，js的处理打包，配置完成后，可以正确打包。

webpack常用指令：
- webapck 以不压缩的形式进行打包
- webpack -p 线上发布的时候最小化压缩打包
- webpack-dev-server 启动前端开发服务

webpack-dev-server

• npm install webpack-dev-server –save-dev （安装）
• webpack-dev-server/client?http://localhost:8088 （配置）
• webpack-dev-server –port 8088 –inline （启动）

---

最后的项目初始完成之后的文件目录如下：