前端项目简单的构建

1.先说一下模块化规范

require是Commonjs的规范，node应用是由模块组成的，遵从commonjs的规范。
import是es6为js模块化提出的新的语法，import （导入）要与export（导出）结合使用。
(1)commonjs输出的，是一个值的拷贝，而es6输出的是值的引用；
(2)commonjs是运行时加载，es6是编译时输出接口；

2.使用webpack打包发布

(npm run bulid)
webpack默认只打包js文件，需要借助loader模块打包其他文件，大致流程如下：

使用loader打包css、less、图片、Vue单页面文件等类型文件还需要在webpack.config.js中添加对应的配置，详情如下：

3.使用vue脚手架

(尽量使用node 使用9以上版本,vue脚手架3版本以上)
脚手架使用相对于webpack非常简便。可以使用命令行交互方式创建新版vue项目，也可以使用vue ui图形化界面方式创建vue项目。
（1）初始化一般安装babel、router、vuex、配置文件(eslint可不安)即可，会自动生成对应文件。
（2）图形化界面每次启动项目关闭项目点击按钮即可，甚至不用npm run dev启动命令等其他命令。
(3)安装依赖包也不需要npm install，直接搜索对应的依赖，点击安装。ps.也需要安装less-loader、less等开发依赖
(4)通过vue-cli3.0以上版本生成的项目，不存在webpack.config.js，配置端口等项写在vue.config.js中，具体配置可以参考vue官方文档。