【www.hj8828.com】webpack打包后一向访谈页面图片路线错误的消灭方法_javascript技艺_脚本之家

前言

正文说的这种图片路线错误是那样的,运维webpack-dev-server,一切平常,未有不当。当webpack之后,直接张开index页面,报错,图片找不到,找不到的由来是路线错误。

先看自身的种类代码

webpack.config.js

var Webpack = require;var path = require;module.exports = { entry: './js/entry.js', output: { path: path.join, filename: 'bundle.js', publicPath: "/src/" }, module: { loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]' }, { test: require.resolve, loader: 'exports-loader?window.Zepto!script-loader' } ] }, watch: true, devtool: "cheap-module-eval-source-map"}

此间设置了publicPath,用法点击这里

index.html中引用路线如下:

当运行webapck-dev-server时,

进而,要卷入,目标是脱离命令能一向访谈页面。

操作如下:

1.执行webpack

2.将build中的文件全部拷贝到src中

因为图片路线错误,所以找不到图片。

本身经过独立给管理图片的loader设置publicPath排除了那几个主题素材,如下:

 { test: /\.$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]', options:{ publicPath:'/' } }

然后测量试验,webapck-dev-server成功,wepback成功,张开页面访谈,成功。

总结

如上就是这小说的全体内容了,希望本文的源委对大家的学习恐怕工作能带动一定的增派,如有疑问大家能够留言沟通,感激大家对剧本之家的支持。