问

javascript - webpack css分离打包后，图片的路径问题。

易_拉罐发布于 2022-11-12 20:39

web

webpack应用的一个个人demo项目中，css使用了

 output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },


var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
loader: ExtractTextPlugin.extract('style-loader','css-loader?modules')

test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url-loader?limit=10000&name=images/[hash:3].[name].[ext]'
...
plugins里面：
new ExtractTextPlugin("css/[name].css?1.2.1"),//生成的css样式文件

当运行，或者打包的时候，图片的路径出了问题，问题如下：

打包后，图片路径的引用成了css/imgages/....怎么成了这样，好奇怪！

我的文件引用是background:url('../images/name.png') no-repeat 100% 100%;
运行或者打包的时候成了这样了

GET http://localhost:7000/css/images/827.name.png 404 (Not Found)
报错了

4 个回答

我自己有一个方法就是把
```
new ExtractTextPlugin("[name].css?1.2.1"),//生成的css样式文件
```
替换成这样，这样就避免了images在css文件里，可是这不是我想要的效果，这样的话，项目结构就有点不好了，css不再文件夹内。

还请路过的大神解决一下
2022-11-12 20:40 回答

Mr---Nic
设置 publicPath 为绝对路径
eg:
```
output: {
    publicPath: '/',
},
```
2022-11-12 20:40 回答

mobiledu2502857827
遇到同样问题，各种测试，最终把问题定在了extract-text-webpack-plugin此插件上，如不使用此插件，将不会出现此问题，根源就在 new ExtractTextPlugin("css/[name].css?1.2.1") 前面的路径上，这个路径加载了原本正确的路径之前，导致了最终问题！

参考这个，不知是否有用

2022-11-12 20:40 回答

null
设置一下publicPath

2022-11-12 20:40 回答

mobiledu2502857377

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签