Skip to content

zhenghuahou/webpack-cli

Repository files navigation

技术栈

  • vue2 + vuex + vue-router + axios SPA
  • koa2 + koa-router + lowdb + ejs 模板
  • webpack3 + HMR
  • 模拟后端 + 环境配置 + 打包
  • ES6+构建,ES6+代码

开发环境:

node: V8+

为了能正常运行,建议node升级到V8+

使用方法

npm run dev
  1. 本地开发的时候运行此命令,不需要启动后端服务,会自动开启本地服务。
  2. 开发服务器启动后,双击命令行上的链接地址即可在浏览器中打开首页。你可以在config文件夹中修改你的开发服务器配置。 编写代码保存,浏览器即可热刷新。
  3. 因为前端入口文件只有一个build/server/views/template.ejs,用html-webpack-plugin插件渲染,通过给html-webpack-plugin传递showHtmlWebpackPlugin:true可以在页面渲染的时候输出htmlWebpackPlugin信息
  4. 为了方便,npm run dev改成不走后端路由
npm run build

构建生成未压缩的代码到dist目录,方便检查打包之后,而又没有压缩的代码。没有热加载功能

npm run prod

打包生成测试环境或者线上环境代码时使用这个命令,此时代码是压缩过的

npm run server

开启本地mock api server服务,如果没有dist/manifest.json文件,则会在额外执行一次npm run build --banwatch打包前端代码到硬盘,如果dist/manifest.json文件已经存在,则不会再执行npm run build --banwatch

npm start

同时开启本地mock api server服务和前端自动化构建服务(带有前端热加载功能)

npm watch

nodemon监听build目录里的代码变化(即监听构建代码),如果代码有变化则会自动重启服务

npm run build  distcustom

自定义输出目录为distcustom

npm run build distcustom --banwatch

自定义输出目录为distcustom,执行一次打包后就退出,即不监听文件变化

npm run build --report

使用webpack-bundle-analyzer插件分析webpack打包生成的资源

目录结构

项目根目录

|---build 项目构建代码  
|  |---config 构建项目用到的配置  
|  |---task 构建任务入口  
|  |---server 本地server服务器 
|  |---webpack.config.dev.js webpack开发配置  
|  |---webpack.config.prod.js webpack上线配置  
|---config 项目配置  
|---node_modules node模块  
|---src 应用源码目录  
|  |---test 业务级文件入口
|  |  |---assets 业务资源图片以及样式 
|  |  |---components 业务组件  
|  |  |---views 业务入口 
|  |  |---api.js  api调用
|  |  |---router.js 业务路由
|  |---example components组件demo案例目录  
|  |  |---pages  demo案例
|  |  |---config.json  demo路由相关配置
|  |  |---demos.vue demo入口文件
|  |  |---router.js demo路由 
|  |---global 全局性资源  
|  |  |---assets   图片以及css文件  
|  |  |---iconfont 字体图标 
|  |---router SPA站点路由 
|  |  |---index.js 
|  |---store vuex模块
|  |  |---index.js 
|---dist 打包生成代码目录  
|---zip  zip包目录  
|---.babelrc      babel运行时配置  
|---.editorconfig 编辑器配置  
|---.gitignore    git忽略配置  
|---package.json  npm配置  
|---postcss.config.js postcss插件配置  
|---README.md 项目自述  

温馨提示

vscode安装的vetur插件默认不格式html,格式化html,要在首选项下的设置中配置:

//https://github.com/vuejs/vetur/issues/99
"vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // js-beautify-html settings, see https://github.com/vuejs/vetur/blob/master/server/src/modes/template/services/htmlFormat.ts
      "wrap_attributes": "force-aligned"
    }
  }