configureWebpack作為一個既可以使用函數(shù)，又可以使用對象的屬性。設(shè)置的值既可以與其他值組合起來形成最終的配置，也可以直接更改配置。

 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構(gòu)建react或者vue項目的時候，一般分為dev開發(fā)環(huán)境和prod線上環(huán)境.
   dev開發(fā)環(huán)境推薦：eval-cheap-module-source-map，inline-cheap-module-source-map
   prod線上環(huán)境推薦：（none）不設(shè)置，nosources-source-map
   具體模式差別
2. devServer：open是否自動打開網(wǎng)頁，port是打開的端口。devServer.proxy是devServer下的一個屬性。當(dāng)您有一個單獨(dú)的API后端開發(fā)服務(wù)器，并且想要在同一個域上發(fā)送API請求時，則代理這些 url 。看例子。

proxy: {
    '/proxy': {
        target: 'http://your_api_server.com',
        changeOrigin: true,
        pathRewrite: {
            '^/proxy': ''
        }
}

假設(shè)你主機(jī)名為 localhost:8080 , 請求 API 的 url 是 http：//your_api_server.com/user/list

'/proxy'：如果點擊某個按鈕，觸發(fā)請求 API 事件，這時請求 url 是http：//localhost:8080/proxy/user/list 。

changeOrigin：如果 true ，那么 http：//localhost:8080/proxy/user/list 變?yōu)?http：//your_api_server.com/proxy/user/list 。但還不是我們要的 url 。

pathRewrite：重寫路徑。匹配 /proxy ，然后變?yōu)?' ，那么 url 最終為 http：//your_api_server.com/user/list 。

secure: 默認(rèn)情況下，不接受運(yùn)行在 HTTPS 上，且使用了無效證書的后端服務(wù)器。如果你想要接受，只要設(shè)置 secure: false 就行。
其他細(xì)節(jié)

3. externals:怎么理解呢，意思是如果需要引用一個庫，但是又不想讓webpack打包（減少打包的時間），并且又不影響我們在程序中以CMD、AMD或者window/global全局等方式進(jìn)行使用（一般都以import方式引用使用），那就可以通過配置externals。
   webpack 的externals配置
   externals配置
   
   image.png
   
   引入CDN又是什么意思呢？（一環(huán)套一環(huán)，永遠(yuǎn)學(xué)不完）就是import 導(dǎo)入
   引入CDN資源很細(xì)，細(xì)節(jié)到了又下一層。。
4. loaderOptions:對響應(yīng)類的文件轉(zhuǎn)編譯程css文件。