webpack插件extract-text-webpack-plugin抽取css后，图片路径出现问题？
打包后的目录结构
│ .babelrc
│ index.html
│ list.txt
│ package-lock.json
│ package.json
│ webpack.config.js
│
├─dist
│ │ index.html
│ │
│ ├─css
│ │ main.css
│ │
│ ├─images
│ │ holder.jpg
│ │
│ └─js
│ main.bundle.js
│
└─src
│ app.js
│
├─assets
│ car2.jpg
│ holder.jpg
│
└─components
test.css
test.jswebpack配置文件(版本是^3.8.1)
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Build_Path = path.resolve(__dirname,'dist');
const BuildConfig = {
entry: './src/app.js',
output: {
path: Build_Path,
filename: 'js/[name].bundle.js'
},
module:{
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('autoprefixer')(),
require('cssnano')()
]
}
}
]
})
},
{
test: /\.less$/i,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('autoprefixer')(),
require('cssnano')()
]
}
},
'less-loader'
]
})
},
{
test: /\.(png|jpg|gif|svg)$/i,
loader: 'file-loader',
options:{
name: 'images/[name].[ext]'
}
}
]
},
plugins:[
new CleanWebpackPlugin([Build_Path],{verbose:false}),
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body'
}),
new ExtractTextPlugin('css/[name].css')
]
};
module.exports = BuildConfig;html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
</head>
<body>
<div class="wrapper">
<img src="src/assets/car2.jpg" alt="">
<div class="box">
<p>1</p>
<div class="imgbg"></div>
</div>
</div>
</body>
</html>如上图的打包后的目录结构是我想要的，css/js/images/分别打包出一个对应的文件夹
我
index.html模板文件下有直接引入图片，在css文件中也有用相对路径写出背景图片
问题
如果不用
extract-text-webpack-plugin提取css出来，是没有问题的，所以我猜测问题是出在这个插件上，也看到sf上有网友提出这个问题，但是没有很好的解决方案在查找答案的过程中，有说修改
output.publicPath的，也有说在插件下添加options.publicPath的，还有说修改file-loader.options.publicPath，我都有测试，可能是测试的方法不对，都没有达到我想要的效果。倒是修改
file-loader下的name，把images/[name].[ext]改成[name].[ext]就可以，但是不能把图片放在dist/images文件夹下
所以希望各位大神能帮忙解决这个问题，在这里先谢过了！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
修改rules加载器中的publicPath路径，
use: ExtractTextPlugin.extract({
https://zhuanlan.zhihu.com/p/...
使用 copy-webpack-plugin 这个插件
npm install copy-webpack-plugin --save-dev