포장 글꼴 Webpack 2와 별도의 디렉토리에있는 멋진 글꼴 파일

Question

Cordova 응용 프로그램에서 Webpack 2 및 Font Awesome을 사용하려고합니다.

app 
config.xml 
hooks 
node_modules 
package.json 
platforms 
plugins 
webpack.config.js 
www 

(이 자연스럽게 컨텍스트 내 NPM 파일과 웹팩 구성을 포함 app는 내가 원시 JSX 소스 코드를 멀리 다람쥐 곳.) 다음 코르도바 응용 프로그램은이 같은 파일 구조를 생성합니다.

www 아래 구조는 (아웃 컴파일 된 웹 응용 프로그램을 이동해야하는 위치이다), 다음과 같습니다

css 
fonts 
img 
index.html 
js 

내가 웹팩 구성에 대한 대상으로 fonts 디렉토리를 만들었습니다. 내가 겪고있는 문제는 루트 아래의 유용한 위치에 글꼴을 복사 할 수 있거나 필터링 된 CSS를 올바로 가질 수 있다는 것입니다. 예를 들어

, 나는 아래와 같은 예를 사용하는 경우 :

 { 
      test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "file-loader?name=[name].[ext]&outputPath=www/fonts/&publicPath=/fonts/" 
     } 

파일은 www 아래에 배치받을 있지만 컴파일 된 소스가 이상한 나온다.

@font-face { 
    font-family: 'FontAwesome'; 
    src: url(/fonts/www/fonts/fontawesome-webfont.eot); 
    src: url(/fonts/www/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'), url(/fonts/www/fonts/fontawesome-webfont.woff2) format('woff2'), url(/fonts/www/fonts/fontawesome-webfont.woff) format('woff'), url(/fonts/www/fonts/fontawesome-webfont.ttf) format('truetype'), url(/fonts/www/fonts/fontawesome-webfont.svg#fontawesomeregular) format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

나는 아직 www에서 글꼴을 배치 할 때 파일 로더와 함께 행복 매체를 찾을 수 있도록. How to configure font file output directory from font-awesome-webpack in webpack? 및 Can't load font-awesome with Webpack의 권장 사항은 실제로 어디에도 없습니다.

Answer 1

file-loader의 outputPath 옵션은 출력 디렉터리와 관련이 있으므로 경로에 포함됩니다. 그리고 publicPath은 사용 된 경로의 시작 부분에 지정된 경로를 추가하기 만하면 기본적으로 출력 디렉토리가 서버의 다른 곳에 위치한다는 의미입니다. 디렉토리 내의 구조는 변경되지 않아야하므로 원래 경로는 변경되지 않습니다.

설명대로 작동되게하려면 출력 디렉토리 처리 방법을 변경해야합니다. 이미 출력 디렉토리가 www인데, webpack은 모든 것을 넣어야합니다. 따라서 output.path을 www으로 구성하는 것이 좋습니다.

output: { 
    path: path.resolve(__dirname, 'www'), 
    // Other output options 
} 

이렇게하면 모든 출력 이름/경로에 www을 지정할 필요가 없습니다. 예를 들어, 다음 줄을 따라 뭔가를했을 수도 있습니다 : filename: 'www/bundle.js, 이제는 filename: 'bundle.js'이됩니다. 결과는 동일하지만 출력 파일을 저장하는 곳을 webpack에게 알려주기 때문에 그 뒤에있는 개념은 다르지만 파일 이름 자체 만 처리와 관련이 있지만 출력 디렉토리는 적합하지 않습니다.

이제 fonts/과없이 file-loader에 outputPath을 변경해야하는 publicPath 다음 URL 얻을 것 : 상대 경로의

url(fonts/fontawesome-webfont.eot); 

을, 당신은 아마 그것을 확인하고 싶은 서버 상대 통로.없는 유일한 것은 그러므로 당신이 /에 publicPath을 설정할 것, 최고의 /과 규칙은 (쉽게 읽을 수 있습니다 옵션, 좋네요 웹팩이 구문을 사용하여 대신 인라인)이된다 :

{ 
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, 
    loader: 'file-loader', 
    options: { 
    name: '[name].[ext]', 
    outputPath: 'fonts/', 
    publicPath: '/' 
    } 
} 

을 당신은 아마, 자산을 포함 같은 공공 경로를 존중하는, 그래서 대신 로더 당을 정의하는, 당신이 output.publicPath에서 설정할 수 있습니다 다른 로더를 할 것입니다

. 출력 경로를 설정

output: { 
    path: path.resolve(__dirname, 'www'), 
    publicPath: '/', 
    // Other output options 
}