Razzle: 이미지 및 기타 정적 자산을로드하는 방법은 무엇입니까?

예를 들어 글꼴의 경우 다음을 추가 할 수 있습니다.

,
{
  test: /\.(woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: "url?limit=100000&mimetype=application/font-woff"
}

서버가 이미지 확장자를 이해하지 못합니다. ssr에 필요한 후크를 사용해야합니다.
https://github.com/bahmutov/node-hook

또한이 파일 서버에 추가 할 수 있습니다.

require('babel-register')
if (development variable) require.extensions['.png'] = function () {};
require('./server')

https://github.com/tcoopman/image-webpack-loader 를 사용하여 이미지를 처리했습니다. 파일 로더를 기반으로한다고 생각하지만 이미지를 최적화 할 수 있습니다.

이거 닫아

@jaredpalmer 안녕하세요, 굉장한 키트에 감사드립니다 :)이 백업을

// logo-component.js
import LogoImage from './logo.png' // colocated image in component folder

export default ({ linkUrl }) =>
  <a href={linkUrl}>
    <img src={LogoImage} alt="Logo" /> 
  </a>

위의 경우를 처리하기 위해 webpack-isomorphic-tools 을 사용했지만 작동하지만 인체 공학 및 설정이 매우 부서지기 쉽고 엉망인 느낌이 들었습니다. 다른 프로젝트를 시작하려고합니다. 여러분의 생각을 듣고 정말 좋을 것입니다. 접근 방식- assets.json 도 통계에 사용될 수있는 것 같습니다.

다시 한 번 jared에게 감사드립니다. 제공 할 수있는 모든 방향, 상용구 또는 웹팩 구성은 대단히 감사하겠습니다. 스타터에 추가하고 싶은 것이 있으면 PR을 제출해 드리겠습니다.

나는 아마 내가 아주 간단한 해결책을 간과하고 있다고 생각한다 .... 다시 감사한다 !! :)

npm을 통해 url-loader 를 설치하고 각 webpack.config에 다음을 추가하기 만하면됩니다.

      ....
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        loader: 'url-loader?limit=10000'
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
        loader: 'url-loader?limit=10000'
      }
      ...

그런 다음 위에서 설명한대로 정확히 요구할 수 있습니다. BTW limit 매개 변수는 실제로 이미지를 생성해야하는 임계 값과 data-uri를 생성해야하는 임계 값에서 url-loader 를 알려줍니다.

편집하다:

또한 웹팩 서버 구성에서 new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), 를 제거하십시오.

@jaredpalmer 응답에 감사드립니다 :) 정확히 내가 https://www.npmjs.com/package/webpack-isomorphic-tools를 사용하여 해결할 수 있었지만 정말 느낌 매우 투박한 ...

@ rowellx68 image-webpack-loader를 사용하여 언급

@ b2 node-hook 솔루션에 대한 추가 컨텍스트 나 예제를 제공 하시겠습니까? 하나의 매니페스트를 사용할 수 있도록 자산 플러그인과 통합하는 방법이 있습니까?

@justingreenberg babel-register는 이미지 파일 유형을 처리 할 수 ​​없습니다. 해결 방법은 서버 를 수정하는 것

require('babel-register');
if (process.env.NODE_ENV == 'development') {
  require.extensions['.png'] = function () {};
  require.extensions['.jpg'] = function () {};
  require.extensions['.jpeg'] = function () {};
  require.extensions['.woff'] = function () {};
  require.extensions['.woff2'] = function () {};
  require.extensions['.ico'] = function () {};
  require.extensions['.svg'] = function () {};
}
require('./server');

@justingreenberg image-webpack-loader 는 이미지를 최적화합니다 ... file-loader 와 함께 사용합니다.

...
      {
        test: /\.(png|jpg|jpeg|gif)(\?.*)?$/,
        loaders: [
          'file',
          'image-webpack?' + JSON.stringify({
            bypassOnDebug:true,
            progressive: true,
            optimizationLevel: 7,
            interlaced: true,
            pngquant: {
              quality: "65-90",
              speed: 4
            },
            svgo: {
              removeUnknownsAndDefaults: false,
              cleanupIDs: false
            }
          })
        ]
      },

나는 여전히 글꼴과 svg에 url-loader 를 사용합니다.

@ rowellx68 @ b2whats 우리는 url-loader 로 이것에 대한 PR을 만들어야합니까? dev에서 require.extension 단점은 무엇입니까? 추악하지만 dev IMHO를 위해 서버를 번들로 묶는 것보다 깨끗합니다. 🤔

@jaredpalmer re : 패치에는 해결 방법이 필요합니다. 이것은 흥미로운 접근 방식입니다. 따라서 require에 수동으로 확장을 등록하면 모듈이 url-loader ) 누를 수 있습니다.

re : image-webpack, 그건 내 이해 였지만 (정말 최적화) @ rowellx68 이 이미지에 사용하고 있다고

다시 한번 감사드립니다!

@jaredpalmer require.extensions 가 더 이상 사용되지 않는 것 같습니다.

@justingreenberg re : image-webpack-loader . 실제로 주로 이미지 최적화를위한 것입니다. 그러나 결과 이미지는 assest.json 추가되지 않았습니다.

뿡뿡
슬라이스 개발 및 제품 모드가 필요합니다. webpack 구성은 다를 수 있습니다. 개발 모드에서는 서버에서 이미지의 일반 URL을 가져와야합니다. prod 모드에서는 모든 최적화를 사용할 수 있습니다.

빌드 스크립트를 수정했습니다. 이제 robots.txt, favicon 등을위한 pbulic 폴더가 있습니다. "완벽한 솔루션"은 아니지만 작동합니다. 번들 js-> public/assets (git에 체크인되지 않음).

즉, 인라인 캐시 무효화를 허용하는 것처럼 '의 requireHooks 솔루션을 @justingreenberg 모색 할 것입니다.

안녕하세요, 이것이 범위를 벗어난 경우 알려주십시오. 그러나 정적 자산 논의는 다소 관련이있는 것 같습니다.

나는 웹팩 세계에 상당히 익숙하지 않은 사람이고 (읽는 방법 : 아직 사용하는 방법에 대한 단서가 없음)이 프로젝트를 사용하여 클라이언트의 스타일 가이드를 사용하여 웹 앱을 구축하려고합니다. CSS 스타일을 반복해서 적용하는 대신 클라이언트의 스타일 가이드가 포함 된 CSS 파일을로드하려고합니다. 스타일 시트를 정적으로로드 한 다음 아프로디테를 사용하여 레이아웃 등을 관리하는 빠르고 상대적으로 고통없는 방법이 있습니까?

target: 'node' 옵션을 사용하여 웹팩과 함께 서버 항목을 번들링하는 것은 어떻습니까?
우리는 노드의 require ()를 해킹하거나 webpack-isomorphic-tools를 사용할 필요없이 서버 측에서 모든 웹팩 로더를 사용할 수 있습니다.
아니면 내가 보지 못한이 접근 방식에 중대한 문제 나 단점이 있습니까? 개발할 때 두 개의 웹팩 시계가 필요합니다.

편집 : 이미 prod를 위해 수행되고 있지만 dev도 아닌 이유는 무엇입니까?