Webpack "OTS 구문 분석 오류"글꼴로드

Webpack "OTS 구문 분석 오류"글꼴로드

---

내 웹팩 구성은를 사용하여 글꼴을로드하도록 지정하고 url-loaderChrome을 사용하여 페이지를 보려고하면 다음 오류가 발생합니다.

OTS parsing error: invalid version tag
Failed to decode downloaded font: [My local URL]

내 구성의 관련 부분은 다음과 같습니다.

{
  module: {
    loaders: [
      // ...
      {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'],
      },
      {
        test: /images\/.*\.(png|jpg|svg|gif)$/,
        loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
      },
      {
        test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/,
        loader: 'file-loader?name="[name]-[hash].[ext]"',
      }
    ],
  },
}

Safari에서는 발생하지 않으며 Firefox를 사용해 보지 않았습니다.

개발 단계에서는를 통해 파일을 제공 webpack-dev-server하고 있으며 프로덕션 단계에서는 디스크에 기록되고 S3에 복사됩니다. 두 경우 모두 Chrome에서 동일한 동작을 얻습니다.

이는 더 큰 이미지에서도 발생합니다 (이미지 로더 구성의 10kB 제한보다 큼).

---

TL; DRoutput.publicPath " http://example.com/assets/ " 로 설정하여 자산에 대한 절대 경로 (전체 호스트 이름 포함)를 사용하십시오 .

문제

문제는 URL이 동적으로로드 된 CSS blob에서 파싱 될 때 Chrome이 URL을 확인하는 방식입니다.

페이지를로드하면 브라우저가 Webpack 번들 항목 JavaScript 파일을로드합니다.이 파일 style-loader에는 페이지에로드되는 CSS의 Base64 인코딩 사본도 포함됩니다.

이것이 Chrome DevTools의 모습입니다.

CSS에 데이터 URI로 인코딩 된 모든 이미지 또는 글꼴 (예 : 파일의 콘텐츠가 CSS에 포함됨)에는 문제가 없지만 URL로 참조되는 자산의 경우 브라우저가 파일을 찾아서 가져와야합니다.

이제 기본적으로 file-loader( url-loader대용량 파일의 경우 위임) 자산을 참조하기 위해 상대 URL을 사용 합니다. 그게 문제입니다!

file-loader기본적으로 생성 된 URL-상대 URL

상대 URL을 사용할 때 Chrome은 포함 된 CSS 파일을 기준으로 상대 URL을 확인합니다. 일반적으로 괜찮지 blob://...만이 경우 포함 파일은에 있고 모든 상대 URL은 동일한 방식으로 참조됩니다. 최종 결과는 Chrome이 상위 HTML 파일에서로드하려고 시도하고 HTML 파일을 글꼴의 콘텐츠로 파싱하려고 시도하는 것입니다. 이는 분명히 작동하지 않습니다.

해결책

file-loader프로토콜 ( "http"또는 "https")을 포함하는 절대 경로를 사용하도록 강제합니다 .

다음과 동등한 것을 포함하도록 웹팩 구성을 변경하십시오.

{
  output: {
    publicPath: "http://localhost:8080/", // Development Server
    // publicPath: "http://example.com/", // Production Server
  }
}

이제 생성되는 URL은 다음과 같습니다.

절대 URL!

이러한 URL은 Chrome 및 기타 모든 브라우저에서 올바르게 구문 분석됩니다.

사용 extract-text-webpack-plugin

It's worth noting that if you're extracting your CSS to a separate file, you won't have this problem because your CSS will be in a proper file and URLs will be correctly resolved.

---

As asnwered here by @mcortesi if you remove the sourceMaps from the css loader query the css will be built without use of blob and the data urls will be parsed fine

---

For me the problem was my regex expression. The below did the trick to get bootstrap working:

{
    test: /\.(woff|ttf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
    loader: 'url-loader?limit=100000'
},

---

As with @user3006381 above, my issue was not just relative URLs but that webpack was placing the files as if they were javascript files. Their contents were all basically:

module.exports = __webpack_public_path__ + "7410dd7fd1616d9a61625679285ff5d4.eot";

in the fonts directory instead of the real fonts and the font files were in the output folder under hash codes. To fix this, I had to change the test on my url-loader (in my case my image processor) to not load the fonts folder. I still had to set output.publicPath in webpack.config.js as @will-madden notes in his excellent answer.

---

I experienced the same problem, but for different reasons.

After Will Madden's solution didn't help, I tried every alternative fix I could find via the Intertubes - also to no avail. Exploring further, I just happened to open up one of the font files at issue. The original content of the file had somehow been overwritten by Webpack to include some kind of configuration info, likely from previous tinkering with the file-loader. I replaced the corrupted files with the originals, and voilà, the errors disappeared (for both Chrome and Firefox).

---

I know this doesn't answer OPs exact question but I came here with the same symptom but a different cause:

I had the .scss files of Slick Slider included like this:

@import "../../../node_modules/slick-carousel/slick/slick.scss";

On closer inspection it turned out that the it was trying to load the font from an invalid location (<host>/assets/css/fonts/slick.woff), the way it was referenced from the stylesheet.

I ended up simply copying the /font/ to my assets/css/ and the issue was resolved for me.

---

Since you use url-loader:

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

So another solution to this problem would be making the limit higher enough that the font files are included as DataURL, for example to 100000 which are more or less 100Kb:

{
  module: {
    loaders: [
      // ...
      {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'],
      },
      {
        test: /images\/.*\.(png|jpg|svg|gif)$/,
        loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=application/font-woff',
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=application/font-woff',
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=application/octet-stream',
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader',
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=100000&mimetype=image/svg+xml',
      },
    ],
  },
}

Allways taking into account on what the limit number represents:

Byte limit to inline files as Data URL

This way you don't need to specify the whole URL of the assets. Which can be difficult when you want Webpack to not only respond from localhost.

Just one last consideration, this configuration is NOT RECOMMENDED for production. This is just for development easiness.

---

If you're using Angular you need to check to make sure your

<base href="/"> 

tag comes before your style sheet bundle. I switched my code from this:

 <script src="~/bundles/style.bundle.js"></script>
 <base href="~/" />

to this:

 <base href="~/" />
 <script src="~/bundles/style.bundle.js"></script>

and the problem was fixed. Thanks to this post for opening my eyes.

---

As of 2018,

use MiniCssExtractPlugin

for Webpack(> 4.0) will solve this problem.

https://github.com/webpack-contrib/mini-css-extract-plugin

Using extract-text-webpack-plugin in the accepted answer is NOT recommended for Webpack 4.0+.

---

The best and easiest method is to base64 encode the font file. And use it in font-face. For encoding, go to the folder having the font-file and use the command in terminal:

base64 Roboto.ttf > basecodedtext.txt

You will get an output file named basecodedtext.txt. Open that file. Remove any white spaces in that.

Copy that code and add the following line to the CSS file:

@font-face {
  font-family: "font-name";
  src: url(data:application/x-font-woff;charset=utf-8;base64,<<paste your code here>>) format('woff');
}  

그런 다음 font-family: "font-name"CSS에서 사용할 수 있습니다 .

참고 URL : https://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts