Webpack パッケージ化後にページ画像パスに直接アクセスするエラーを解決する方法

この記事では主に、Webpack パッケージ化後のページ画像パスへの直接アクセスのエラーの解決策を紹介します。記事内の紹介は非常に詳細であり、この問題に遭遇した友人にとっては確かな参考と学習価値があります。以下を読んでみましょう。

前書き

この記事で説明されている画像パスのエラーは次のようなものです。webpack-dev-server を実行すると、すべて正常で、エラーはありません。 Webパッキング後、インデックスページを直接開き、画像が見つからない理由はパスが間違っていることです。 webpack-dev-server，一切正常，没有错误。当webpack之后，直接打开index页面，报错，图片找不到，找不到的原因是路径错误。

先看我的项目代码

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"
}

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

index.html中引用路径如下：

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

当运行webapck-dev-server

最初に私のプロジェクトコードを見てください

webpack.config.js

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

ここでpublicPathが設定されています。使用法はここをクリックしてください

index.htmlの参照パスは次のとおりです:

rrreee

webapck-dev-server を実行すると、http://localhost:8080/ が正常に表示されます。

次のステップは、コマンドを使わずにページに直接アクセスできるようにパッケージ化することです。

操作は以下の通りです

1. webpackを実行

2. ビルド内の全ファイルをsrcにコピー

3. ページを表示

画像のパスが間違っているため、画像が見つかりません。 次のように、画像を処理するローダーに publicPath を個別に設定することでこの問題を解決しました:

rrreee

次にテストしたところ、webapck-dev-server は成功し、wepback も成功し、ページ アクセスが開かれました。成功しました。

道はこんな感じです。

🎜上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 🎜🎜関連する推奨事項: 🎜🎜🎜Webpack プロジェクトで CSS モジュールを混合する方法について🎜🎜🎜🎜🎜 CSS3 でのトランジションとアニメーション アニメーション プロパティの使用の紹介🎜🎜🎜🎜🎜🎜🎜🎜🎜

以上がWebpack パッケージ化後にページ画像パスに直接アクセスするエラーを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。