extract-text-webpack-plugin的路徑問題
阿新 • • 發佈:2018-12-16
開發過程中遇到了一個坑,搞了一天才解決,特此記錄
我開發的前端專案用的是webpack+vue,打包的時候把程式碼打包到'www'
資料夾下
檔案結構如下:
我用的webpack配置是之前的領導配置的,平時都沒問題,一直沒注意,這次專案要求改打包後的目錄,要求把css,圖片,字型圖示,js等等全打包到static資料夾下,如圖
這裡修改下webpack裡面的output路徑即可,於是我做出以下改動
這裡修改js的路徑
output: { path: resolve('../www'), chunkFilename: 'static/js/[name].[chunkhash:8].js', filename: 'static/js/[name].[chunkhash:8].js' },
這裡修改圖片字型等路徑
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { outputPath: "static/images/", limit: 10000, name: "[name].[hash:8].[ext]" } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { outputPath: "static/fonts/", limit: 10000, name: "[name].[hash:8].[ext]" } }, { test: /\.(swf|mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { outputPath: "static/media/", limit: 10000, name: "[name].[hash:8].[ext]" } }
重點來了…我用的extract-text-webpack-plugin
來提取css成單獨的檔案,配置如下:
new ExtractTextPlugin({
filename:"static/css/[name].[chunkhash:8].css"
}),
到這裡,所有樣式,圖示,字型,全部打包到static路徑下了
但是執行後報錯,所有的圖示,圖片都找不到
根據控制檯顯示,路徑裡面多了一個static,這個問題讓人百思不得其解,經過查資料,原來是extract-text-webpack-plugin
這個外掛的問題,這個外掛能抽取css成獨立的css檔案,擺脫了js引入css的麻煩,但是
由於我們是將樣式檔案單獨打包,所以圖片的引用是相對於css檔案的。因此要修改url-loader的引數,需要修改publicPath
我之前設定的publicPath是"…/",去外層的目錄,根據我打包後文件目錄結構,仔細想想,css檔案在static/css目錄下,外層是static目錄,所以出現了多了一個static的現象,
於是我把publicPath改為了
"../../"
,終於解決了這個困擾我許久的問題