我有两个项目： Project1 和 Project2 。
Project1 使用 react-bootstrap 。 Project1 使用react-bootstrap的所有组件，并在react-bootstrap组件上创建一个包装器（不要问为什么，这是一个要求）。 Project2 应该使用 Project1 （导出时）作为react-bootstrap的包装库。
Project1 - ＆gt;
index.js：
import { Bootstrap } from 'bootstrap/dist/css/bootstrap.css';
...
import Glyphicon from './src/components/Glyphicon';
...
export default {
...
Glyphicon,
...
};
SRC /组件/ Glyphicon.jsx：
import React, { PropTypes } from 'react';
import { RBGlyphicon } from 'react-bootstrap';
const Glyphicon = props => (
<RBGlyphicon
id={props.id}
bsClass={props.clClass}
glyph={props.glyph}
/>
);
Glyphicon.defaultProps = {
id: undefined,
clClass: 'glyphicon',
glyph: undefined,
};
Glyphicon.propTypes = {
id: PropTypes.string,
clClass: PropTypes.string,
glyph: PropTypes.string.isRequired,
};
export default Glyphicon;
webpack.config.js：
const webpack = require('webpack');
const path = require('path');
module.exports = (env = {}) => {
const isProduction = env.production === true;
return {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'Project1.js',
libraryTarget: 'umd',
library: 'Project1',
},
module: {
rules: [
{
test: /.(js|jsx)?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream',
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml',
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
new webpack.optimize.UglifyJsPlugin(),
],
};
};
我使用 webpack 将此 Project1 导出为名为Project1的捆绑包，并将其复制到 src 文件夹中的 Project2 。我不会复制此版本中生成的字体文件
现在问题始于Glyphicons。
Project2的 - ＆GT;
的src / App.jsx：
import React, { Component } from 'react';
import Project1 from './Project1';
...
export default class App extends Component {
render() {
return (
<div>
...
<Project1.Glyphicon glyph="camera" />Camera
...
</div>
);
}
}
export default App;
index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App';
ReactDOM.render(<App />, document.getElementById('root'));
的index.html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="root">
</div>
<script src='/bundle.js'></script>
</body>
</html>
我使用 webpack-dev-server 构建 Project2 并在浏览器中运行。当我在 Project2 中使用 Glyphicon.jsx 时，图标不会显示在浏览器中。以下是Chrome浏览器控制台中显示的错误：
Chrome Browser Debug Console errors
现在我知道问题与字体有关。
即使我复制这些生成的字体文件并粘贴在 Project2 的根目录中，我仍会遇到相同的错误。
如何从 Project1 导出这些字体文件，以便在 Project2 中使用它们？
