Javascript 在节点包中包含webfonts-网页包生成_Javascript_Webpack_Ecmascript 6_Webfonts_Styled Components

Javascript 在节点包中包含webfonts-网页包生成

javascript webpack ecmascript-6

Javascript 在节点包中包含webfonts-网页包生成,javascript,webpack,ecmascript-6,webfonts,styled-components,Javascript,Webpack,Ecmascript 6,Webfonts,Styled Components,我正在使用它来构建UI库。我正在尝试将该库导出为节点包，以便在其他应用程序中使用我在构建库时遇到字体服务问题。他们在睡觉这是我用来创建字体规则的javascript- import { injectGlobal } from 'styled-components' import { colours } from '../variables' import { MuseoSans300Woff, MuseoSans300Ttf, MuseoSans300Eot, } from

我正在使用它来构建UI库。我正在尝试将该库导出为节点包，以便在其他应用程序中使用

我在构建库时遇到字体服务问题。他们在睡觉

这是我用来创建字体规则的javascript-

import { injectGlobal } from 'styled-components'
import { colours } from '../variables'
import {
  MuseoSans300Woff,
  MuseoSans300Ttf,
  MuseoSans300Eot,
  } from '../fonts'

// inject global is imported to my App.js and simply adds these rules to a style block in the page head
injectGlobal`
  * {
    box-sizing: border-box;
  }
  *:before,
  *:after {
    box-sizing: border-box;
  }
  body {
    background-color: ${colours.body};
  }
  @font-face {
    font-family: 'Museo Sans';
    src: url('${MuseoSans300Eot}');
    src: url('${MuseoSans300Eot}?#iefix') format('embedded-opentype'),
      url('${MuseoSans300Woff}') format('woff'),
      url('${MuseoSans300Ttf}') format('truetype');
    font-weight: 300;
    font-style: normal;
  }
`

这是我用来构建lib的web包配置

// webpack.config.js
var path = require('path')
var env = process.env.WEBPACK_ENV
var libraryName = 'wabelane'
var outputFile
var devtool

if (env === 'build') {
  outputFile = libraryName + '.min.js'
  devtool = ''
} else {
  outputFile = libraryName + '.js'
}

var config = {
  entry: __dirname + '/../src/index.js',
  devtool: devtool,
  output: {
    path: __dirname + '/../lib',
    filename: outputFile,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true,
    publicPath: 'http://localhost:6006/' // Development Server - not sure if this is neededoutpu
  },
  module: {
    loaders: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        loader: 'file-loader?limit=100000'
      }
    ]
  },
  resolve: {
    root: path.resolve('./src'),
    extensions: ['', '.js']
  }
}

module.exports = config

运行webpack会生成一个如下所示的生成文件夹-

lib
- 02e3d1a0db5b2d404a280b4648889676.woff
- 4070279ee17212ed16fb002980c91d1a.eot
- 4b717e26d82d356a381e593202b592ad.ttf
- wabelane.js

然后，我使用

import'../../lib/wabelane'

它会输出一些类似这样的html

<html>
  <head>
  <!-- omitting all irrelavant things -->
    <style type="text/css">
      * {
        box-sizing: border-box;
      }
      *:before,
      *:after {
        box-sizing: border-box;
      }

      body {
        background-color: #f3f3f3;
      }

      @font-face {
        font-family: 'Museo Sans';
        src: url('http://localhost:6006/61af460d0c71ad28e9d36aa1cfb800c3.eot');
        src: url('http://localhost:6006/61af460d0c71ad28e9d36aa1cfb800c3.eot?#iefix') format('embedded-opentype'),
          url('http://localhost:6006/02e3d1a0db5b2d404a280b4648889676.woff') format('woff'),
          url('http://localhost:6006/8193570c53331affaf62bad6d8ee965e.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
      }

    </style>
  <!-- rest of page follows -->


* {
框大小：边框框；
}
*：之前，
*：之后{
框大小：边框框；
}
身体{
背景色：#F3；
}
@字体{
字体系列：“Museo Sans”；
src:url（'http://localhost:6006/61af460d0c71ad28e9d36aa1cfb800c3.eot');
src:url（'http://localhost:6006/61af460d0c71ad28e9d36aa1cfb800c3.eot?#iefix“）格式（'embedded-opentype'），
url（'http://localhost:6006/02e3d1a0db5b2d404a280b4648889676.woff“）格式（“woff”），
url（'http://localhost:6006/8193570c53331affaf62bad6d8ee965e.ttf格式（'truetype'）；
字体大小：300；
字体风格：普通；
}

我的问题是webfonts是404ing，它们似乎不存在于那个位置。知道我做错了什么吗