利用批处理生成前端单页或多页应用webpack40-vue20
批处理前端现在在做项目的时候大多数遇到的都是单页面应用，但有时需要做多页面的时候，会把单页拿过来修改成多页面，如果代码多了，对单页或多页的配置可能会混乱，那么有没有更好的方式能把单页面和多页面不同的配置代码分开，能更清楚的分辩他们的区别，这里是利用批处理对前端构建进行部署 git地址 目录分为三块 single //单页代码 share // 共用代码 many //多页代码只需要用到批处理对其中两者进行合并就能生成想要的单页或多页应用，提示需要安装国内的npm淘宝镜像 如果未安装的需要自行修改build.bat里的命令行call cnpm install为call npm install如下所示： 先选择存放路径，输入项目名，选择要生成的是单页还是多页 这里以单页为示例，其实就是简单的对文件进行复制，复制完成后会自动安装依赖 安装完依赖后还会自动运行项目 如上开启的项目端口为8080目录如下 webpack4 共同配置(share)这里用到了最新的webpack4.0，它简化了很多配置，多线程输出，更快的构建能力，大大提高了开发的效率首先看下配置文件config.js const path = require('path'), config = { //开发环境配置 dev: { port: 8080, // 接口代理 proxyTable: { '/v2': { target: 'https://api.douban.com', changeOrigin: true }, }, }, //生产环境配置 build: { packName: 'myProjcet', //项目打包后名称 outputPath: '', //打包后项目输出路径 templatePath: 'template.html', //html模版路径,基于根路径下 htmlShortPath: '/', //html文件输出路径, 基于outputPath resourcesPath: '', //最终打包路径 resourcesShortPath: 'resources', //资源目录 {packName}/resources }, switchVal: { to_rem: false, //是否开启px转rem to_eslint: false, //是否开启eslint语法检测 }, };//输出的目录config.build.outputPath = path.resolve(__dirname, '../../dist/', config.build.packName);//最终输出目录项目存放路径config.build.resourcesPath = path.join(config.build.outputPath, config.build.resourcesShortPath);module.exports = config;这里有开发环境下的接口代理， 生产环境的目录名称和路径 还有可选的是否转换页面字体为rem和eslint语法检测 eslint校验是默认的规则校验 它还有其它的三种通用规则 可根据自身喜好去设置 ...