闲来整理了一下关于webpack和vue-cli脚手架相关技术，首先webpack是一个单独的程序来作为前端模块化包管理工具，它必须依赖node.js环境，npm工具则是node的包管理工具，最终复杂的项目被切割成许多个模块来开发，且能够跑在本地的服务上的工具。
1、webpack的基本安装
node -v //查看node版本
npm install webpack@3.6.0 -g //安装webpack
npm install webpack@3.6.0 --save dev //局部安装
2、vue-cli脚手架安装
npm install -g @vue/cli // 安装vue-CLI3
yarn global add @vue/cli // 安装yarn管理工具时的脚手架
vue --version // 查看版本
npm install -g @vue/cli-init // 同时使用vue-cli2版本
vue init webpack name // vue-cli2版本生成项目，name为项目名字
vue create name
// 使用vue-cli3版本生成项目,安装时elsint选项为格式检查一般可以取消，第3版本配置config里的配置隐藏在node_modules>@vue中，如需修改需新建一个vue.config.js文件通过module.exports来修改
vue ui // 在vue-cli3版本可以使用图形界面管理，可以用于导入项目，管理依赖包等等
vue-cli2版本的安装配置：
? peoject name (括号内为默认的信息) // 创建项目名称
? peoject dsecription () // 项目描述
? Author // 作者
? vue build // 打包项目的方式，only运行效率更高
compiler // 需要解析成ast
only // 在main.js直接使用render函数解析成虚拟DOM，性能更好，代码更少
? install vue-router ? (y/n) // 是否安装路由
? use EsLint to lint your code ? (y/n) // 对代码是否进行格式检查
? pick an EsLint preset // 规范模式
Standard // 标准规范
Airbnb // 爱彼迎公司
none // 自己配置规范
? set uo unit tests (y/n) // 是否需要单元测试
? setup e2e tests with Nightwatch
// 是否安装Nightwatch利用selenium等工具进行自动化测试
? Should we run 'npm install ' for you after the peoject has been created ()
// 选择 npm 或者 yarn 来作为包管理工具
3、脚手架的文件结构
node_modules // node安装的包，push时需要忽略
build // webpack的配置build
build.js // 此文件用于执行npm run build项目打包
webpack.base.conf.js
alias: {
'@': resolve('src'), // 路径配置，引用路径时@代表src文件夹，HTML引用要用~
}
config// webpack的配置
dev.env.js // 开发运行配置
index.js // 定义的变量
dev:
host // 主机名
port // 端口号
autoOpenBrowser // 是否自动打开浏览器
errorOverlay // 查询错误
notifyOnErrors // 通知错误
poll // 监控文件改动
useEslint // 是否使用eslint，为false时不在进行格式检查
devtool // 调试配置，一共四种模式
cacheBusting // 配合devtool的配置maps，默认在开发环境下为true
cssSourceMap // 是否开启cssSourceMap
build:
index // 编译后index.html的路径
path.resolve(__dirname, '../dist') // 中path.resolve(__dirname）指的是index.js所在的绝对路径，再去找“../dist”这个路径
assetsRoot // 打包后的文件根路径，至于assetsSubDirectory和assetsPublicPath跟dev中的一样，
productionSourceMap // 是否开启source-map，
devtool // 同dev，
productionGzip // 是否压缩，
productionGzipExtensions // gzip模式下需要压缩的文件的扩展名，设置后会对相应扩展名的文件进行压缩
bundleAnalyzerReport // 是否开启打包后的分析报告
prod.env.js // 生产配置
static
// 静态资源文件夹，不会编译直接会复制到项目中，图片不会转化为b64的格式，cli3的版本换成了public文件夹
src // 源码
main.js // 入口文件，或者index.js
Vue.config.productionTip // 产品构建时是否需要提示信息
package.json // 项目相关的信息
author // 作者
version // 版本号
license // 协议，开源则不需要
scripts // 脚本，封装了npm具体执行的命令，创建后优先使用本地安装的包
dependencies // 运行时依赖
devDependencies // 开发时依赖
.babelrc // ES代码转换配置
browsers: ["> 1%", "last 2 versions", "not ie <= 8"]
// ES转化时只转化市场份额小于1%并最后两个版 本的浏览器，IE8及以上的版本
stage // ES的阶段
plugins // 用于转化的插件
.editorconfig // 项目文本配置
charset // 编码
indent_style // 缩进的风格
indent_size // 缩进的规格
end_of_line // 换行
insert_final_newline // 是否在文件最后自动加空行
trim_trailing_whitespace // 是否自动清除每行代码最后无用的空格
.eslintignore // 运行时忽略，不检测的文件
.gitignore// push上Git仓库忽略的文件夹配置
.postcssrc.js // CSS相关转化的配置
index.html // 入口模板
package.json // 管理node相关包和信息
package-lock.json // node的相关包安装的真实版本
dist // 发布
网友评论