发布的html找不到图片资源文件,webpack4打包html中的图片找不到图片

// webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

function resolve(dir) {

return path.join(__dirname, '..', dir);

}

module.exports = {

mode:'production',

// mode:'development',

// context: path.resolve(__dirname, '../'),

entry: {

sensorInit:'./src/javascript/sensorInit',

jsbridge:'./src/javascript/jsbridge',

sensor:'./src/javascript/sensor',

utils:'./src/javascript/utils',

jweixin:'./src/javascript/jweixin-1.3.2',

fastLoan:'./src/fastLoan01/fastLoan.js',

},

output: {

// filename: './js/[name].[hash:7].bundle.js',//filename路径必须是path的相对路径,写绝对路径会报错

filename: './js/[name].bundle.js',//filename路径必须是path的相对路径,写绝对路径会报错

path: path.resolve(__dirname, 'dist'),//打包后所有的文件放在哪个文件夹

// publicPath:'/assects/',

// chunkFilename: '[productType].css',

},

resolve:{

extensions:['.js','.vue','.json'],//引入时不带扩展名

alias:{//配置别名

'@':resolve('src'),

}

},

module:{

rules:[

//css配置

{

test: /\.(sa|sc|c)ss$/, // 可以打包后缀为sass/scss/css的文件

use:[

{

loader:MiniCssExtractPlugin.loader,

options:{

// you can specify a publicPath here

// by default it use publicPath in webpackOptions.output

// publicPath: '../'

}

},

"css-loader"

],

},

//图片配置

{

test:/\.(png|jpg|gif|jpeg|svg)$/,

use:[

{

loader: "url-loader",

options: {

name: "[name].[hash:5].[ext]",

limit: 1024, // size <= 1kib

outputPath: "images",

publicPath:'../images',

}

}

]

},

{

test: /\.(html)$/,

use: {

loader: 'html-loader',

options: {

attrs: ['img:src', 'img:data-src', 'audio:src'],

root: path.resolve(__dirname, '../dist'),

minimize: true

}

}

},

]

},

plugins:[

//生成html文件

new HtmlWebpackPlugin({

filename:'fast.html',

template:'fast.html',

title:'关于',

inject:true,//所有js注入到body底部

chunks: ['sensorInit','jsbridge','sensor','utils','jweixin','fastLoan'],

hash: true,

}),

//提取css到单独的文件

new MiniCssExtractPlugin({

filename:'css/[name].[hash:4].css',

chunkFilename:'[id].css',

}),

],

}

打包后报下面的错:

bVbuyON?w=1688&h=320

请问是哪里配置错了?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值