How to solve the error of directly accessing the page image path after webpack packaging

This article mainly introduces to you the solution to the error of directly accessing the page image path after webpack packaging. The introduction in the article is very detailed and has certain reference and learning value for friends who encounter this problem. Friends who need it Let’s take a look below.

Preface

The image path error mentioned in this article is like this, run webpack-dev-server, Everything works fine, no errors. After webpacking, open the index page directly and report an error. The image cannot be found. The reason why it cannot be found is that the path is wrong.

Look at my project code first

webpack.config.js

var Webpack = require("webpack");
var path = require("path");

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

The publicPath is set here, usage click here

The reference path in index.html is as follows:

<script type="text/javascript" src="src/bundle.js" ></script>

When runningwebapck-dev -server, http://localhost:8080/ displays normally.

Next, it needs to be packaged so that the page can be accessed directly without the command.

The operation is as follows:

1. Execute webpack

2. Copy all the files in the build to src

3 .View page

The picture cannot be found because the picture path is wrong.

I solved this problem by setting the publicPath separately for the loader that processes the image, as follows:

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

Then test, webapck- dev-server is successful, wepback is successful, page access is opened, and it is successful.

The path looks like this.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the method of mixing css modules in webpack projects

Transition transition and Animation animation properties in CSS3 Introduction to the use

The above is the detailed content of How to solve the error of directly accessing the page image path after webpack packaging. For more information, please follow other related articles on the PHP Chinese website!