vue.config.js(1)循循善诱入门来之configur

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()
    ]
  },

1. 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
   具体模式差别
2. 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 就行。
其他细节

3. externals:怎么理解呢，意思是如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。
   webpack 的externals配置
   externals配置
   image.png
   引入CDN又是什么意思呢？（一环套一环，永远学不完）就是import 导入
   引入CDN资源很细，细节到了又下一层。。
4. loaderOptions:对响应类的文件转编译程css文件。