configureWebpack作为一个既可以使用函数，又可以使用对象的属性。设置的值既可以与其他值组合起来形成最终的配置，也可以直接更改配置。
configureWebpack: {
devtool: isProd ? false: 'source-map',
devServer: {
open: true,
proxy: {
'/netease-api': {
target: 'http://localhost:3000',
pathRewrite: { '^/netease-api': '' },
changeOrigin: true,
secure: false,
},
},
port: 8080,
},
externals: isProd ? {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
}: {},
plugins: [
new WorkboxPlugin.GenerateSW()
]
},
- devtool: isProd ? false: 'source-map'：我们在使用wenpack构建react或者vue项目的时候，一般分为dev开发环境和prod线上环境.
dev开发环境推荐：eval-cheap-module-source-map，inline-cheap-module-source-map
prod线上环境推荐：（none）不设置，nosources-source-map
具体模式差别 - devServer：open是否自动打开网页，port是打开的端口。devServer.proxy是devServer下的一个属性。当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url 。看例子。
proxy: {
'/proxy': {
target: 'http://your_api_server.com',
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}
假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list
'/proxy'：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list 。
changeOrigin：如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。
pathRewrite：重写路径。匹配 /proxy ，然后变为'' ，那么 url 最终为 http：//your_api_server.com/user/list 。
secure: 默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false 就行。
其他细节
- externals:怎么理解呢，意思是如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。
webpack 的externals配置
externals配置
image.png
引入CDN又是什么意思呢？（一环套一环，永远学不完）就是import 导入
引入CDN资源很细，细节到了又下一层。。 - loaderOptions:对响应类的文件转编译程css文件。
