webpack和vue-cli脚手架的详解

闲来整理了一下关于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 // 发布