Problems and solutions to errors reported when accessing the page after webpack packaging

This article mainly introduces you to the solution to the path error when directly accessing the page after webpack packaging Picture. The introduction in the article is very detailed and has certain reference learning for friends who encounter this problem. Value, friends in need come and 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, click here for usage

The reference path in index.html is as follows:

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

When running webapck-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 I tested, webapck-dev-server was successful, wepback was successful, and the page was opened for access, which was successful.

The path looks like this.

The above is the detailed content of Problems and solutions to errors reported when accessing the page after webpack packaging. For more information, please follow other related articles on the PHP Chinese website!