웹팩 패키징 후 페이지 이미지 경로에 직접 접근하는 오류 해결 방법

이 글은 주로 웹팩 패키징 후 페이지 이미지 경로에 직접 접근하는 오류에 대한 해결 방법을 소개합니다. 글의 소개는 매우 상세하며 이 문제를 겪는 친구들을 위한 확실한 참고 자료와 학습 가치가 있습니다. 필요합니다. 아래에서 함께 살펴보겠습니다.

머리말

이 글에서 언급한 이미지 경로 오류는 이렇습니다. webpack을 실행하세요 -dev-server, 모든 것이 잘 작동하고 오류도 없습니다. 웹패킹 후 직접 인덱스 페이지를 열어서 이미지를 찾을 수 없는 이유는 경로가 잘못되었기 때문입니다. 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:'/'
  }
  }

공용 경로는 여기에서 설정됩니다. 사용법을 보려면 여기를 클릭하세요

index.html의 참조 경로는 다음과 같습니다.

#🎜🎜 #

rrreee

webapck-dev-server를 실행하면 http://localhost:8080/이 정상적으로 표시됩니다.

다음으로, 명령어 없이 페이지에 직접 접근할 수 있도록 패키징해야 합니다.

작업은 다음과 같습니다.

1. webpack을 실행합니다

2. build to src中

　3.페이지 보기

이미지 경로가 잘못되어 이미지를 찾을 수 없습니다.

이미지를 처리하는 로더에 대해 다음과 같이 publicPath를 별도로 설정하여 이 문제를 해결했습니다.

rrreee

#🎜 🎜# 그런 다음 테스트하면 webapck-dev-server 성공, wepback 성공, 페이지 액세스 열기 성공입니다.

길은 이렇게 생겼습니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 추천: #🎜🎜##🎜🎜##🎜🎜#웹팩 프로젝트에서 CSS 모듈을 혼합하는 방법에 대해#🎜🎜##🎜🎜##🎜🎜##🎜🎜## 🎜🎜 #CSS3의 전환 및 애니메이션 애니메이션 속성 사용 소개#🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜 #

위 내용은 웹팩 패키징 후 페이지 이미지 경로에 직접 접근하는 오류 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!