How to troubleshoot Webpack Direct access to page picture path error after packaging

This article mainly introduces you to the Webpack packaging after the direct access to the page picture path error solution, the article introduced in very detailed, to meet the problem of friends have a certain reference learning value, the need for friends below to see it together.

Objective

This article says this picture path error is like this, running webpack-dev-server , everything is OK, no error. When the Webpack, directly open the index page, error, the picture is not found, the reason is not found is the path error.

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:pat H.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"}

Here set the Publicpath, usage click here

The reference path in Index.html is as follows:

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

When run webapck-dev-server , http://localhost:8080/is displayed as normal.

Then, to package, the goal is to leave the command to access the page directly.

The operation is as follows:

1. Executive Webpack

2. Copy all of the files in the build to SRC

3. View Page

The picture was not found because the picture path was wrong.

I solved this problem by individually giving the loader settings for processing the picture Publicpath, as follows:

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

Then test, Webapck-dev-server success, Wepback success, open page access, success.

The path is this way.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!