devServer.proxy
object [object, function]
当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时，代理某些 URL 可能会很有用。
开发服务器使用功能强大的 http-proxy-middleware 软件包。 查看其 documentation 了解更多高级用法。 请注意，http-proxy-middleware 的某些功能不需要target键，例如 它的 router 功能，但是仍然需要在此处的配置中包含target，否则webpack-dev-server 不会将其传递给 http-proxy-middleware）。
使用后端在 localhost:3000 上，可以使用它来启用代理：
webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000',
},
},
};
现在，对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users。
如果不希望传递/api，则需要重写路径：
webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {
'^/api': '' },
},
},
},
};
默认情况下，将不接受在 HTTPS 上运行且证书无效的后端服务器。 如果需要，可以这样修改配置：
webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false,
},
},
},
};
有时不想代理所有内容。 可以基于函数的返回值绕过代理。
在该功能中，可以访问请求，响应和代理选项。
返回 null 或 undefined 以继续使用代理处理请求。
返回 false 会为请求产生 404 错误。
返回提供服务的路径，而不是继续代理请求。
解析(Resolve)
这些选项能设置模块如何被解析。webpack 提供合理的默认值，但是还是可能会修改一些解析的细节。关于 resolver 具体如何工作的更多解释说明，请查看模块解析。
resolve
object
配置模块如何解析。例如，当在 ES2015 中调用 import ‘lodash’，resolve 选项能够对 webpack 查找 ‘lodash’ 的方式去做修改（查看模块）。
webpack.config.js
module.exports = {
//...
resolve: {
// configuration options
},
};
resolve.alias
object
创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：
webpack.config.js
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/'),
},
},
};
现在，替换“在导入时使用相对路径”这种方式，就像这样：
import Utility from ‘…/…/utilities/utility’;
你可以这样使用别名：
import Utility from ‘Utilities/utility’;
也可以在给定对象的键后的末尾添加 $，以表示精准匹配：
webpack.config.js
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
xyz$: path.resolve(__dirname, 'path/to/file.js'),
},
},
};
这将产生以下结果：
import Test1 from ‘xyz’; // 精确匹配，所以 path/to/file.js 被解析和导入
import Test2 from ‘xyz/file.js’; // 非精确匹配，触发普通解析
// var webpack = require('webpack');
const path = require('path')
// Node.js path 模块提供了一些用于处理文件路径的小工具，我们可以通过以下方式引入该模块：
function resolve(dir) {
// 整合当前路径
return path.join(__dirname, dir)
}
function publicPath() {
// NODE_ENV是一个用户自定义的变量，在webpack中它的用途是判断生产环境或开发环境。
if (process.env.NODE_ENV == 'production') {
return "././";
} else {
return "/";
}
}
// vue.config.js
module.exports = {
// publicPath:"././",
publicPath: publicPath(),
// 国际化配置 使用其它语言，默认情况下中文语言包依旧是被引入的
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
}
},
devServer: {
host: "0.0.0.0", //指定使用一个 host。默认是 localhost，这里默认值即可
port: 8081, //指定端口
hot: true, // 开启热更新
https: false, // 是否开启https模式
proxy: {
// 请求代理服务器
'/springbootjlvpC': {
//带上api前缀的
target: 'http://localhost:8080/springbootjlvpC/', //代理目标地址
// changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host
changeOrigin: true,
secure: false,
pathRewrite: {
// 在发出请求后将/api替换为''空值，这样不影响接口请求
'^/springbootjlvpC': ''
}
}
}
}
}