/vue-demo

vue全家桶+webpack4+koa2的配置demo

Primary LanguageJavaScriptMIT LicenseMIT

Vue后台管理系统模板

技术栈 Vue + Vuex + Webpack + Svg + Sass + Koa2

使用说明

# 克隆项目
git clone git@github.com:angelasubi/vue-demo.git

# 安装依赖
yarn

# 本地dev环境运行
npm run dev

# 本地prd环境运行
npm run start

# 打包
npm run release

为什么要写这个东西

  • 理由一: 我从来都不喜欢用脚手架
  • 理由二: 自定义的东西有更好的扩展性

如何搭建

  1. 先来简单的介绍一下目录结构，然后我们再来挨个详细的介绍！ 首先，在根目录下有2个文件（app和src）和一堆配置文件，app为打包的输出点，src为源码。

  2. 先说说根目录下的配置文件是干啥的

  • .balelrc 配置一些东西来达成不用浏览器支持就可以编译成需要的代码 可以看这里
  • .gitignore 防止提交 node_modules 或者 dist 之类的一些不需要提交的文件
  • .styleintrc 一些css规则 可以看这里
  1. src目录下主要包括分为如下几个目录
  • api 公共api调用的接口
  • assets 静态资源目录(就是一些图片，字体，还有svg图片，当然这个svg)
  • common 公共文件目录(components组件、mixins、plugin、utils等)
    这个plugin/index.js引入了svg组件和fetch方法挂载在Vue原型上，当然可以在扩张一些filter、components、fn等
  • router 路由文件
  • store 全局状态管理，也就是Vuex
  • styles 样式文件，包括mixins、normalize、variables、layout、tool、rest以及框架自带的修改文件
  • views 页面，可以根据功能区分，这里只加了一个layout
  1. 重点来说说webpack

分为两个文件 webpack.conf.dev.js 和 webpack.conf.prd.js，对应为开发环境和生产环境的构建

先看看webpack.conf.dev.js里面做了什么

首先定义三个打包地址的常量

  • STATIC_DIST 静态资源打包路径 /app/dist
  • HTML_DIST HTML模板打包路径 /app/dist
  • STATIC_PREFIX HTML内引入资源的前缀 /static/

然后就是引入一些需要的node_modules，在这里用到了如下几个包
path 一个处理文件路径和目录路径的包
webpack 模块打包工具
html-webpack-plugin 生成一个HTML文件
html-webpack-harddisk-plugin 上面的扩展，在HRM的时候特别方便
stylelint-webpack-plugin 代码校验
vue-loader loader...

在配置的时候那么需要一个简单的模块大致如下

module.exports = {
  entry: [],
  output: {},
  devServer: {},
  resolve: {},
  plugins: [],
  module: {}
}

entry 打包入口，在这里我们指向的是/src/app.js，如果多个入口可以写成数组形式
output 编译完成打包的输出点，path为输出的绝对路径，filename为输出的名字，publicPath为资源前缀，chunkFilename为非入口chunk文件的名称
devServer 本地服务，inline启动内联模式 contentBase 从哪个目录中提取内容
resolve 解析，在这里自动解析的扩展为就放了js和vue
plugins 插件，这里用了VueLoaderPlugin来解析，HotModuleReplacementPlugin用来模块热替换，styleLintPlugin来校验一写规范，最后通过HtmlWebpackPlugin来创建html，包含生成的路径名字，源模板来源，favicon，其中inject为不注入所有assets，minify控制输出方式，alwaysWriteToDisk为自动引用资源
module 处理一些必须的模块，包括babel，vue-loader，scss，css，svg，img之类的，可以在基础上继续扩展

然后因为是dev模式，所以需要开mode为development,cache打开，devtool设置为module-source-map方便开发的时候定位问题所在

再来看webpack.conf.prd.js里面做了什么

稍微看一下，感觉和webpack.conf.dev.js美什么差别！！！
但是仔细看一下好像多了点东西，CleanPlugin, MiniCssExtractPlugin, UglifyJsPlugin, OPtimizeCSSAssetsPlugin这几个模块
因为是构建环境，就是打包要发布到服务器上，所以必须做一些优化处理

  • mode模式为production
  • output中filename和chunkFilename采用hash
  • devtool不开启
  • cache不开启
  • 新增optimization，也是在prd环境中最重要的一点，其实也就是优化最明显的地方。在这里我把optimization中分为3个点来考虑: runtimeChunk, minimizer, splitChunks。第一个runtimeChunk用于为 runtime chunks 命名，这里设置为mainfest，第二个minimizer中采用UglifyJsPlugin压缩js，配置为使用缓存，采用多进程提高构建速度,映射源错误、然后用OptimizeCSSAssetsPlugin压缩样式图片等。第三个splitChunks动态导入模块，配置为chunks为异步的时候进行优化，minSize最小为30000字节，minChunks分割前必须共享的模块最小为1，maxAsyncRequests按需加载时候最大并行加载为5，maxInitialRequests入口最大并行请求为3个，name在prd环境下通常为false这样才不会在不必要的时候修改名称,然后是cacheGroups缓存，这里是结合HtmlWebpackPlugin使用的，分为vendor和styles，其中styles中enforce表示忽略splitChunks.minSize，splitChunks.minChunks，splitChunks.maxAsyncRequests，splitChunks.maxInitialRequests选项，并始终为此缓存组创建块。
  • 每次构建的之前用CleanPlugin清理静态资源
  • 新增DefinePlugin在编译的时候设置process.env为prd
  • 通过HashedModuleIdsPlugin生成四位数的hash作为模块id
  • MiniCssExtractPlugin把css提取到单独的css文件中，在webpack4中支持按需加载
  • 最后在HtmlWebpackPlugin中加入minify

iterm中采用cross-env，详情可以点这里

以上就是生产环境下的webpack配置，和开发环境是类似的，只是在基础上添加了许多在打包时候需要考虑和优化的东西，既然这么多相似的地方，那么可以创建一个webpack.conf.base.js来放相同的配置，分别在dev和prd中引入，这样能够更加直观明了。大概就是这样，非常简单其实没什么看看文档根据自己的需求配置扩展就行了。

然后来说说是怎么写出这个vue-demo的

首先需要建几个必备文件，然后在慢慢扩展

mkdir vue-demo
cd vue-demo
npm init  # 初始化package.json
mkdir src  # 作为开发用的目录
mkdir app  # 打包后放东西的目录
touch .babelrc  # 编译es6
touch .styleintrc  # 规则
touch .gitignore  # 提交无视node_modules之类的

重点说两个方面

src开发目录 （文件名已语义化）

app.js入口引入需要的东西
最简单的来讲就是引入Vue, router, css还有app.vue然后实例一个Vue。后续可以添加一些UI框架（比如ElementUI），自定义的配置和一些环境的判断之类的。

  • 然后来说说已经在这个demo中加入的东西fetch和svg-icon
  • 都9012了，所以就简单的封装了一个fetch在src/common/utils/fetch.js中
  • 其实就是做一些处理，采用的type和params的方式而已
  • 因为在很多情况下会用到很多icon，如果全都一个一个手动去搞就太麻烦了，所以简单的写了一个components，用的时候就很爽了，只要把svg扔到assets/iamges/svg下就行了，然后通过相同的名字去调用就好啦。不过如果icon太多的话建议还是弄成字体吧，这样会好点～～

app中启动本地服务

  • app/app.js 中为入口，也就是在package.json中调用的node服务，这里采用koa2相关的模块来启动，当然是限于dev环境，并没有配置prd环境。如果打包后的dist想要部署的话可以放到服务器上就行啦～
  • router.js 就是对应打包后的dist文件的index.html通过fs调用展示

最后

感觉是一个相对比较简单的Webpack4和Vue的demo

如果有什么问题或者遗漏的地方欢迎提issue，谢谢😁

MIT