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()
]
},
- 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
具體模式差別 - devServer：open是否自動打開網(wǎng)頁卒煞，port是打開的端口痪宰。devServer.proxy是devServer下的一個屬性。當(dāng)您有一個單獨的API后端開發(fā)服務(wù)器畔裕，并且想要在同一個域上發(fā)送API請求時衣撬，則代理這些 url 〔褡辏看例子淮韭。
proxy: {
'/proxy': {
target: 'http://your_api_server.com',
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}
假設(shè)你主機名為 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: 默認情況下翩概，不接受運行在 HTTPS 上牲距，且使用了無效證書的后端服務(wù)器返咱。如果你想要接受，只要設(shè)置 secure: false 就行牍鞠。
其他細節(jié)
- externals:怎么理解呢咖摹，意思是如果需要引用一個庫，但是又不想讓webpack打包（減少打包的時間）难述，并且又不影響我們在程序中以CMD萤晴、AMD或者window/global全局等方式進行使用（一般都以import方式引用使用），那就可以通過配置externals胁后。
webpack 的externals配置
externals配置
image.png
引入CDN又是什么意思呢店读？（一環(huán)套一環(huán)，永遠學(xué)不完）就是import 導(dǎo)入
引入CDN資源很細攀芯，細節(jié)到了又下一層屯断。。 - loaderOptions:對響應(yīng)類的文件轉(zhuǎn)編譯程css文件侣诺。
