builder-webpack-vue v1.0.0

背景

目前对于整个工程的构建，基本上都使用 webpack 工具进行构建，构建的大致流程是，通过读取 webpack.config.js 配置进行构建， 配置中会包含 entry(输入）、ouput（输出）、module 加载不同的 loader（转换器）、plugins（插件） 等配置。 目前项目使用的是一套 webpack.config.js 配置，不同的配置会对应不同的输出，然后根据环境变量进行开发、生产的特殊配置。 每个项目都是使用独立的一套 webpack.config.js 配置，这样会带来修改一个项目的配置方案，无法快速应用到各个项目中，会带来更多的开发成本。 由于是同一套配置，所有配置代码都冗余在一起，两者都会带来较低的可维护性，也无法多个项目之间通用。

过程

主要分为三个配置，基础配置、开发配置、生产配置 { mode: 模式, context: 上下文, devtool: 是否生成 source map, entry: {}, output: [], plugins: [], rsolve: 设置模块如何被解析, optimization: 优化, module: [], loader devServer: {} 开发

}

通过 webpack-merge 进行合并

基础配置 webpack.base.config.js

开发配置 webpack.dev.config.js

生产配置 webpack.prd.config.js

目的

模块名 process.argv 数组 git 版本号 编译日期

输出 静态文件服务器 本地 ip 端口号

环境变量 { 编译日期， git 版本号， node 环境， TARGET, 静态文件服务器地址， 模块名称, mock }

挂载到 env 上

插件

通用

copy-webpack-plugin 拷贝静态资源

webpack.DefinePlugin 宏定义替换环境变量

webpack.HashedModuleIdsPlugin 模块没有变化，保持模块 ID

html-webpack-plugin 模板页 html, manifest，bootloader

vue-loader

开发

生产

加载器

通用

开发

生产