Question

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

我在构建库时遇到问题。他们是404ing。

这是我用来创建字体规则的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的webpack配置

// 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'

在我的App.js中导入lib

并输出一些像这样的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 -->

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

包括节点包中的webfonts - webpack build

0 个答案: