output 的 path、publicPath
output 中的 path
它的作用是告知 webpack 打包后的输出目录，比如静态资源的js、css等输出到哪里，常见的设置文件夹名为 dist、build
output 中的 publicPath，它是指定index.html文件打包引用的一个基本路径，即 index.html 相对于打包文件的路径
它默认值为空字符串，打包后引入js时，路径为bundle.js
在开发中，我们也将其设置为 /，路径就是 /bundle.js，浏览器会根据所在域名+路径去请求对应资源
如果我们希望在本地直接双击打开 index.html 文件夹来运行，会将其设置为 ./，路径是 ./bundle.js，可以根据相对路径去查找资源
output 中的 path、publicPath在webpack中的配置:
module.exports = {
output: {
path: path.resolve(__dirname, './build'),
publicPath: '/'
}
}devServer 下的 publicPath
介绍
devServer下的publickPath属性，是指定本地服务所在的文件夹
它默认值为 /，也就是我们直接访问端口即可访问其中的资源，如 http://localhost:8080
如果我们将其设置为 /abc，则需要通过 http://localhost:8080/abc 才能访问到对应的打包后资源，并且这时，资源文件如 bundle.js中，通过 http://localhost:8080/bundle.js也是无法访问的，所以必须将 output.publicPath 也设置为 /abc，官方建议将 devServer.publicPath 和 output.publicPath设置为同一值。
webpack.config.js 中的配置：
module.exports = {
output: {
path: path.resolve(__dirname, './build'),
publicPath: '/abc'
},
devServer: {
hot: true,
publicPath: '/abc'
}
}devServer 中的 contentBase
解释：
如果模板文件index.html，将非打包资源，如script 等引入了其他的本地js，示例如下：
<body> <div id="app"></div> <script src="./lib/boot.js"></script> </body>
此时，在运行模式下可能就需要设置 contentBase
webpack.config.js中的配置
module.exports = {
devServer: {
hot: true,
contentBase: path.resolve(__dirname, './lib')
}
}这里，本地服务解析时，就会去 lib 查找。然后，将html中的lib去了
<body> <div id="app"></div> <script src="./boot.js"></script> </body>
当然，也可以这么做：新建 public 文件夹，将非打包资源，如script引入的js文件，和 index.html 模板文件都放进去，引入好。然后通过 CopyWebpackPlugin ，在打包时，将文件都拷贝进去。
devServer 中的 watchContentBase
作用：
监听非打包资源，如script引入的文件的变化。
webpack.config.js 中的配置
module.exports = {
devServer: {
hot: true,
watchContentBase: true,
contentBase: path.resolve(__dirname, './lib')
}
}devServer 中的 hotOnly
作用：
发生致命错误，修复后，会自动刷新浏览器，如果设置了hotOnly，不会，只会更新刚才修复的代码模块
webpack.config.js 中的配置
module.exports = {
devServer: {
hot: true,
hotOnly: true
}
}devServer 中的 host
作用：
设置主机地址，默认时localhost，如果希望其他地方也能访问，可以设置为 0.0.0.0
localhost 和 0.0.0.0 的区别
localhost：本质上是一个域名，通常被解析成 127.0.0.1
127.0.0.1：回环地址（Loop Back Address），表达的意思其实是我们主机自己发出去的包，直接被自己接收
0.0.0.0：监听IPV4上所有的地址，再根据端口号找到不同的应用程序
webpack.config.js 中的配置
module.exports = {
devServer: {
host: '0.0.0.0'
}
}通过命令行配置
npx webpack serve --host 0.0.0.0
devServer 中的 port、open、compress
port 端口号，可以设置服务器的端口，默认为 8080
open 编译成功，是否自动打开浏览器
compress 代码是否进行gzip压缩
webpack.config.js 中的配置
module.exports = {
devServer: {
port: 8081,
open: true,
compress: true
}
}devServer 中的 Proxy 代理
作用：
Proxy 是开发中非常常用的一个配置项，目的是设置代理来解决跨域访问问题 比如api请求地址是 http://localhost:8888，而本地启动的服务器域名是 http://localhost:8000，这时请求Api，就会跨域 这时，可以将请求先发送到一个代理服务器，而代理服务器和API的服务器没有跨域问题，就可以解决跨域问题了。
webpack.config.js 中的配置：
devServer: {
proxy: {
// 这种配置方式，在真实请求时，会带上 /api
// '/api': 'http://localhost:8888'
// 这种配置最常用
// '/api' : {
// target: 'http://localhost:8888',
// pathRewrite: {
// '^/api': '' // ^表示开头，$表示结束。这里表示 /api 替换成空
// }
// }
// https代理的配置
// '/api' : {
// target: 'https://localhost:8888',
// pathRewrite: {
// '^/api': '', // ^表示开头，$表示结束。这里表示 /api 替换成空
// }
// secure: false // 开启https代理
// }
// changeOrigin
// 如果亲求的是 localhost:8888，虽然使用了代理，但是浏览器请求的地址，仍然是：localhost:8000，然后被代理到了 8888，即请求的host地址，是 8000。如果服务器没有做校验，没问题，如果做了校验，即请求地址必须和api保持一致，则不行，目的是服务器防止被爬取数据，只允许本服务器的请求。
// 这时就要求改 header 里面的 host，只需要将 changeOrigin设置为true，请求的地址，就会和api代理的地址一致了（webpack用http-proxy-middleware库实现的）。
// '/api' : {
// target: 'http://localhost:8888',
// pathRewrite: {
// '^/api': '',
// },
// changeOrigin: true // 设置请求头的host属性
// }
}
},devServer 下的 historyApiFallback：
解释：
historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在 history 路由跳转之后，进行页面刷新时，返回404的错误，如：localhost:8080/about，刷新时，浏览器会去找about目录，就会报错
webpack中配置
devServer: {
// 可以直接设置布尔值
// historyApiFallback: true // 开启这个，就不会返回404
// 也可以进行详细配置
historyApiFallback: {
rewrites: [
{ from: /about/, to: '/index.html' }
]
}
},