> 웹 프론트엔드 > JS 튜토리얼 > Webpack 패키징 후 페이지 접속시 보고되는 오류에 대한 문제점 및 해결 방법

Webpack 패키징 후 페이지 접속시 보고되는 오류에 대한 문제점 및 해결 방법

零下一度
풀어 주다: 2018-05-19 09:23:43
원래의
3461명이 탐색했습니다.

이 글에서는 주로 웹팩 패키징 직후 사진 페이지에 액세스할 때 발생하는 경로 오류에 대한 해결 방법을 소개합니다. 이 글에서는 이러한 문제에 직면한 친구들을 위한 확실한 참고 자료와 학습 가치가 있습니다. 아래를 살펴보겠습니다.

머리말

본 글에서 언급한 이미지 경로 오류는 이렇습니다. 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: &#39;url-loader?limit=8192&name=images/[hash:8].[name].[ext]&#39;,
  options:{
   publicPath:&#39;/&#39;
  }
  }
로그인 후 복사
publicPath가 여기에 설정되어 있습니다. 사용법은 여기를 클릭하세요

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

rrreee

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

다음 단계는 명령어 없이 페이지에 직접 접근할 수 있도록 패키징하는 것입니다.

작업은 다음과 같습니다.

 1. webpack 실행

 2. 빌드에 있는 모든 파일을 src

 3. 페이지 보기

🎜이미지 경로가 잘못되어 이미지를 찾을 수 없습니다. . 🎜🎜이미지를 처리하는 로더에 대해 다음과 같이 publicPath를 별도로 설정하여 이 문제를 해결했습니다. 🎜rrreee🎜 그런 다음 테스트해 본 결과 webapck-dev-server는 성공했고, wepback은 성공했으며, 페이지가 액세스용으로 열렸는데 성공했습니다. . 🎜🎜🎜🎜🎜길은 이렇게 생겼어요. 🎜

위 내용은 Webpack 패키징 후 페이지 접속시 보고되는 오류에 대한 문제점 및 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿