/**
*webpack 分为
*Entry：入口
*Output: 出口
*Module: 模块
*Plugin: 插件
*DevServer: 服务器配置
*/
module.exports = {
// 把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。这样打包后文件小而且别人看不到你的源码了
/**
* productionSourceMap ：true;
* 作用 : 项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错
*/
productionSourceMap: false, //生产环境是否要生成 sourceMap
//基本路径
/**
* 项目打包时，打包出来的文件根目录，如果我们设置成“/”则我们打包后默认都是在dist目录下,假设我们设置成"/app"，我们所打包的dist目录下会生成一个app目录，
* 打包后的资源文件都是在app目录下的，这是所有的静态资源都会找不到，所以我们一般都是设置成“/”的。
* 拓展：把开发服务器假设在根路径，可以直接使用一个判断,publicPath :process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
*/
publicPath: './', //部署应用包时的基本 URL,默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
// 输出文件目录
/**
* 项目打包时输出的文件目录，比如说设置成“dist”，那么我们打包后的目录名称就是“dist”，我们设置成“build”，打包后的目录名称就是“build”。
*/
outputDir: 'dist', //打包时输出的文件目录
indexPath: 'index.html',
// eslint-loader 是否在保存的时候检查
lintOnSave: true, //是否在开发环境下每次保存代码时都启用 eslint验证
assetsDir: 'assets', //放置生成的静态资源 (js、css、img、fonts) 的目录
// css的处理
css:{
sourceMap:false,
// extract:
// loaderOptions的作用：向 webpack 的预处理器 loader 传递选项。共享全局变量
loaderOptions: {
less: {
data:`@import "@/assets/styles/mixin.less"` // 把less文件注入全局，在全局可以直接使用
},
scss: {
prependData: `@import "@/assets/styles/theme.scss";`//全局注入scss文件，可以在文件内编写scss代码
},
css: {
prependData: `@import "@/assets/styles/reset.css";`//全局注入scss文件，可以在文件内编写css代码
}
}
},
// CLI内部webpack配置，会被 webpack-merge 合并入最终的 webpack 配置,有两种写法。函数和对象的形式，这里只介绍我常用的函数形式。
chainWebpack:config=>{
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
config.resolve.alias.set('@', resolve('src'))//配置src别名为@
},
/**
* devServer.disableHostCheck配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。
* DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。
* 它通常用于搭配–host 0.0.0.0使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。
*
*/
// dev环境下，webpack-dev-server 相关配置
devServer: {
open: true, //启动服务时自动打开浏览器访问
port: 1880, //端口号，如果端口号被占用，会自动加1
host: '0.0.0.0', //主机名， 127.0.0.1，真机 0.0.0.0
https: false, //是否启用HTTPS协议,如果是https接口需要进行此配置
disableHostCheck: true, //是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。
overlay:true,//当出现编译错误或警告时，在浏览器中显示全屏覆盖。
/**
* hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，
* 将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
*/
hot: true,
hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
// 配置代理
proxy: {
//设置代理
'/axios': {
target: 'http://101.15.22.98', //代理地址，这里设置的地址会代替axios中设置的baseURL
changeOrigin: true, //是否跨域，如果接口跨域，需要进行这个参数配置
secure: false, //如果是https接口，需要配置该参数，false为http访问，true为https访问
//pathRewrite方法重写url
pathRewrite: {
'^/axios': ''
}
}
},
before: app => { }
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
