html图片分开,webpack单独分离打包css，css里引用的图片路径错误，怎么解决？
現在我的這個項目是將css和js單獨打包出來，打包后的目錄結構和打包前一致。
打包前：
從這張圖可以看到，如果是css文件夾根目錄下的css文件引用images文件夾下的圖片應該使用../就可以了，如果是css下某一個文件夾下面的css引用圖片的話，就要往上層目錄跳兩層../../
打包后：
webpack.config.js
var webpack = require('webpack');
var glob = require('globby')
var utils = require('utils');
var htmlWebpackPlugin = require('html-webpack-plugin');
var nodeExternals = require('webpack-node-externals');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CSS_PATH = {
css: {
pattern: ['./public/css/**/*.css' ,'!./public/css/index.css'],
src: path.join(__dirname, './public/css/'),
dst: path.resolve(__dirname, 'build/public/css/'),
}
}
function getCSSEntries(config) {
var fileList = glob.sync(config.pattern)
console.log(fileList)
return fileList.reduce(function (previous, current) {
var filePath = path.parse(path.relative(config.src, current))
var withoutSuffix = path.join(filePath.dir, filePath.name)
previous[withoutSuffix] = path.resolve(__dirname, current)
return previous
}, {})
}
module.exports = [
{
target:'web',
externals: [nodeExternals()],
devtool: 'cheap-module-eval-source-map',
context: path.resolve(__dirname),
entry: getCSSEntries(CSS_PATH.css),
output: {
path: CSS_PATH.css.dst,
filename: '[name].css'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader",
publicPath:'../'
})
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: 'url-loader?limit=20000&name=[name].[ext]',
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
]
},
resolve: {
extensions: ['.css']
},
plugins: [
new ExtractTextPlugin('[name].css'),
]
},
]
結果
打包完成后啟動項目，本來那些css根目錄下的css引用的圖片路徑有一部分錯誤了。
css根目錄下的css文件圖片路徑
請問各位大神，這個問題用什么辦法可以解決？可以把對應的圖片打包到對應的文件夾下嗎？我是一個webpack菜鳥，配置有點雜亂，望各位大神見諒！！！
總結
以上是生活随笔為你收集整理的html图片分开,webpack单独分离打包css，css里引用的图片路径错误，怎么解决？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 车险保单在哪里查询
- 下一篇： jq动态获取input的值传给html,