開發過程中遇到了一個坑,搞了一天才解決,特此記錄

我開發的前端專案用的是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