关于文件的配置介绍
// 文件
const path = require('path') //引入核心模块path,意思是路径模块
function resolve(dir){
return path.join(__dirname,dir)
//这个函数的意思就是拼接目录,__dirname,是的固有的,意思是绝对路径的前缀????????
}
//比如我需要文件src的绝对路径使用上面函数 resolve('src'),就能获取到绝对路径
const packageName = require(resolve('')).name;
//qiankun子应用需要我们配置(个人项目不需要理会)????????
const VUE_CLI_SERVICE_MODE = process.VUE_CLI_SERVICE.mode;
//注意这个mode,在中的scripts:命令有对应????????
window.console.log('NODE_ENV: ', process.env.NODE_ENV);
//这个是我们查看是什么环境(dev环境,测试环境,生产环境等)
//这里我就要多带一嘴了,其实这就是环境变量配置 这个要看下一份.env文件的代码
//项目具有好多的环境,要设置每个环境代理很麻烦,说以用了这个样的方式不同的环境引入不同的代理js文件(例子:根目录下的:文件)
let proxy = {};
let envProxy = {};
if (process.argv[2] === 'serve') {
// 属性返回一个数组，这个数组包含了启动进程时的命令行参数，
//数组的第一个元素[0]——返回启动进程的可执行文件所在的绝对路径
//第二个元素[1]——为当前执行的JavaScript文件路径
//剩余的元素为其他命令行参数 [2]就是我们启动的命令行
// 默认配置，所有环境本地启动都会引入
proxy = require('./'); //拼接路径
// 环境配置，根据环境引入响应的配置，覆盖默认配置
envProxy = require(`./proxy.${process.VUE_CLI_SERVICE.mode}.js`);
}
导出一个包含选项的对象
module.exports = {
outputDir:'dist', // npm run build 打包构建后存放的目录
assetsDri:'assets' //放置生成的静态资源 (js、css、img、fonts) 的目录。
productionSourceMap: false, //是否为生产环境构建生成 source map
//source map 直译过来就是资源地图。所以，source map的作用就是定位。source map定位的时浏览器控制台输出语句在项目文件的位置。
//就是你('打印到控制台上面会显示到具体是那一行',
//看报错的时候挺有用的,但是false将提高构建速度)
publicPath:process.env.VUE_APP_URL_PATH, //部署应用包时的基本 URL， 用法和 webpack 本身的 一致.
//这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
devServer:{ //配置webpack-dev-server 的行为
disableHostCheck:true
//新版的webpack-dev-server出于安全考虑，默认检查hostname，
//如果hostname不是配置内的，将中断访问。
host: 'localhost', //这个不解释了,我也不知道怎么解释
port: '8080', //设置的端口
open: true, //true为表明我们运行命令行,页面会自动打开 npm run server 的时候页面自己打开
headers: { //该配置项可以在HTTP响应中注入一些HTTP响应头。
'X-foo': '112233'
}
//这个常用了,也是每个项目都要使用,就是代理服务可以在我们请求的时候帮助我们跨域
proxy: {
//...proxy,
//...envProxy
//之前我上面引入了每个环境代理文件js所以可以这样写,下面是常规例子????????
'/api': { //只要请求中带有/api的url,就会经过这里请求
target: '', //目标请求地址
changeOrigin: true //true为可以跨域
pathRewrite: {
// '^/apis': ''表示把/apis替换为‘’(空字符串)，这样既能使用代理，
// 又能在请求接口api时去掉/apis，获得正确的短信api路径。
'^/api': ''
},
},
},
pages:{ //默认多页配置,默认undefined
//在 multi-page（多页）模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
//使用key:value是一个对象形式
// value 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
enter:{
entry:'src/pages/enter/', //page的入口文件
title:'进入页面' ,
//????????template中的title 标签需要是<title><%= %></title>
template:'src/pages/enter/' , //模板文件,在dist/的输出文件
filename: '', //文件名
minify: {
removeAttributeQuotes: false // 是否移除属性的引号
},
//????????使用minify会对生成的html文件进行压缩。默认是false。
//html-webpack-plugin内部集成了 html-minifier,因此，还可以对minify进行配置：
//（注意，虽然minify支持BooleanObject,但是不能直接这样写：minify: true ,
//这样会报错 ERROR in TypeError: Cannot use 'in' operator to search for 'html5' in true ,
//使用时候必须给定一个 { } 对象 ）网上面的解释不多,我只找到这些
chunks: ['chunk-vendors', 'chunk-common', 'index']
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/`
// 并且如果找不到的话，就回退到 `public/`。
// 输出文件名会被推导为 ``。
subpage: 'src/subpage/' (这个我没有用上,所以照搬文档)
}
},//当然你可以写多个子页面以上面对象的形式
configureWebpack:{
resolve: {
alias: {
'@': resolve('src') , 这个是最常用的,修改路径把src路径换成@
'_c':resolve('src/components'), 也可以自己修改
}
},
},
chainWebpack(config){
//这个可以搞首屏加快,但是太复杂了以后在补充,或者直接不写了吧
window.console.log(config)
},
pluginOptions: {
// 为每个vue组件全局引入改变量文件，无需在vue文件手动引入等繁琐操作即可使用全局变量
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, 'src/c-bop-common/styles/')]
}
}
output: { //如果是qiankun的子应用,就要加上 (项目需要可以忽略)
// 把子应用打包成 umd 库格式
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`
}
}