loaders: [ //小于8000KB的圖片使用base64處理 { test: /\.(jpg|png|gif)$/, loader:'url-loader?limit=8000&name=img/[name].[hash:8].[ext]' }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }]plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html', filename: 'index.html', hash: false }), new ExtractTextPlugin('css/[name].[hash:8].css')]如上配置,將把img圖片打包到輸出目錄的img/ 中;把css圖片打包到輸出目錄的css/ 中;如果不使用ExtractTextPlugin將樣式表單獨輸出,樣式直接生成在頁面上,樣式中的圖片路徑就是正確的如:url(img/a.jpg)。可我現在的輸出目錄是這樣的:-dist +img +css +js index.html 樣式表中的圖片路徑還是:url(img/a.jpg),我期望的是:url(../img/a.jpg);請問需要怎么處理呢?已解決,感謝@麥芽糖。解決方法:將上面的loader: ExtractTextPlugin.extract('style-loader', 'css-loader')增加個publicPath配置,如下:loader: ExtractTextPlugin.extract('style-loader', 'css-loader',{ publicPath: '../' })
webpack打包后圖片路徑出錯
智慧大石
2018-08-13 10:09:36