前端现在在做项目的时候大多数遇到的都是单页面应用，但有时需要做多页面的时候，会把单页拿过来修改成多页面，如果代码多了，对单页或多页的配置可能会混乱，那么有没有更好的方式能把单页面和多页面不同的配置代码分开，能更清楚的分辩他们的区别，这里是利用 批处理 对前端构建进行部署 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: 'https://www.jb51.net/', //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 校验是默认的规则校验
它还有其它的三种 通用规则
可根据自身喜好去设置
然后是 utils.js 工具方法
module.exports = { /*** * 获取src一级目录 */ getFiles() { const files = glob.sync('src/**/'), arr = []; files.forEach((filepath) => { let name = filepath.split('https://www.jb51.net/')[1]; if (name) { arr.push(...[name]); } }) let obj = {}; if (arr.length) { [...new Set(arr)].map(item => { obj[`@${item}`] = path.join(__dirname, `../src/${item}`); }) } return obj }, /** * 多页面命名 获取每个多页对应的js名命名 * **/ getFileName() { let fileName = glob.sync('src/**/index.js'); entryArr = {}; fileName.forEach(function(path) { let arr = path.split('https://www.jb51.net/'); let name = arr[arr.length - 2]; entryArr[name] = './' + path; }) return entryArr; }, /*** * 静态目录存放路径 */ assetsPath(_path) { return path.posix.join(config.build.resourcesShortPath, _path); }, copyDir(source, target) { rm('-rf', target); mkdir('-p', target); cp('-R', source, target); } }
再来看在开发和生产共用的代码 webpack.base.conf.js
首先看下一些基本的对 vue、css、js 这些loader的操作
rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.js$/, loader: !process.env.NODE_ENV ? 'happypack/loader?id=happy-babel' : 'babel-loader', //loader: 'babel-loader', exclude: /(node_modules|lib)/, include: [ // 表示只解析以下目录，减少loader处理范围 path.resolve(__dirname, '../src'), ], }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: [{ loader: 'file-loader', options: { //生产环境真实路径 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }] }, { test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/, use: { loader: 'url-loader', options: { limit: 10000, //生产环境真实路径 name: utils.assetsPath('image/[name].[hash:7].[ext]') } } }, ]