Webpack: loading iconic fonts

问题

I've installed font-awesome:

npm install font-awesome

I've added these rules on webconfig:

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

Into my main.scss I've added this import:

@import "font-awesome/scss/font-awesome.scss";

font-awesome css rules are loaded into browser but, fonts are not loaded.

It seems fonts are requested by browser on _localhost/fonts/fontawesome-webfont.woff2?v=4.7.0. However, the response is the main html page:

I think the problem is related with fonts are into nodo_modules/font-awesome/fonts/. I think these files are not able to be reached because they are not "moved" into a reachable place by webpack... So, where are they located after webpack ends "bundle process"?

EDIT

I've changed my test by:

{ test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

However when browser tries to load font, the response keep being an html:

EDIT 2

I've just realized that into my tsconfig.json file contains this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["dom", "es6", "es2015", "es2016", "es2017"],
    "noEmitHelpers": true,
    "importHelpers": true,
    "skipDefaultLibCheck": true,
    "pretty": true,
    "sourceMap": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules",  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    "compiled",
    "src/main.browser.aot.ts",
    "e2e/**/*.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "forkChecker": true,
    "useCache": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

Does it has something to do?

回答1:

I'm not 100% sure this is accurate, because i can't install your repo - i'm getting some weird, incorrect dependency errors. But i think the issue is:

Your regex does not capture the FontAwesome.otf file.

This test should work now..

{ test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

来源：https://stackoverflow.com/questions/48528476/webpack-loading-iconic-fonts

标签

Webpack

font-awesome