webpack踩坑記錄(一)處理靜態檔案

2021-09-11 10:00:36 字數 1724 閱讀 7655

簡單記錄一下webpack學習過程中需要注意的點

先背一遍基本概念:

webpack最基本的css處理:css-loader + style-loader。其中css-loader用於處理css檔案中的@importurl(...),而style-loader用於將css-loader的輸出生成js中的函式呼叫將css動態新增到html檔案中

目錄結構如下

在main.js中引入css

import base from './src/css/base.css'import common from './src/css/common.css'

複製**

webpack.config.js中配置

,

use:[,)

] }

}] }),

exclude:/node_modules/

}, plugins:[ new extracttextwebpackplugin(),

]複製**

具體配置我們不談,我們講講注意點,

首先我們的loader的載入順序是不能隨意改動的,webpack載入loader是從下到上,也就是先從post-loader->css-loader-->style-loader,

除了css-loader + style-loader還用到了extract-text-webpack-plugin和postcss-loader,首先extract-text-webpack-plugin的作用是將css檔案單獨打包出來,如果沒有這個外掛程式,我們的css將會和js檔案打包到一起,postcss-loader這裡我們我們結合autoprefixer來使用,作用是可以為css屬性新增瀏覽器字首。

這裡用到的loader有url-loader和file-loader

} ]}複製**

這裡需要注意的點我注意到的有一點,如果我們將專案中的單獨放在乙個資料夾下

publicpath也需要單獨配置,否則的位址將會錯誤,我們的 output中也有乙個相同的引數publicpath,當我們單獨配置了url-loader下的publicpath時,output中的publicpath將會被覆蓋,在實際專案中我們可以配置對應的網域名稱,如下:

當我們需要將vue-cli生成的專案部署到伺服器時,需要將assetspublicpath路徑修改為./也是一樣的道理。

new htmlwebpackplugin(),

複製**

這裡我糾結過js檔案和css檔案引入的問題,生成的html檔案是按照什麼路徑規則引入依賴的,通過幾次實驗,我得出來的結果是這樣的:引入的路徑是由output中的publicpath和filename共同決定的(有點智障的我。。)。

遇到的問題總結起來很簡單,但是自己真正去寫一套配置的時候總是會遇到各種問題,然後感覺到無從解決,只有自己寫過一遍才能說自己懂一點webpack,哈哈哈(**位址)

統一處理異常

1.controlleradvice 註解定義全域性異常處理類 controlleradvice public class globalexceptionhandler 2.exceptionhandler 註解宣告異常處理方法,註解的方法的引數列表裡,還可以宣告很多種型別的引數 controlle...

Web應用架構 錯誤統一處理, 和事務統一處理

因為前期,重點放在業務分析上,這兩塊一直認真思考過,覺得很簡單.一開始只是找了乙個nhibernate的示例,就決定把session的open和close和事務 transaction 的commit,放在httpmodule中處理.算是session per request的模式.之後,繼續加入錯...

Web應用架構 錯誤統一處理, 和事務統一處理

因為前期,重點放在業務分析上,這兩塊一直認真思考過,覺得很簡單.一開始只是找了乙個nhibernate的示例,就決定把session的open和close和事務 transaction 的commit,放在httpmodule中處理.算是session per request的模式.之後,繼續加入錯...