Tus*_*pta 4 fonts glyphicons webpack react-bootstrap webpack-dev-server
我有2个项目：Project1和Project2。
Project1使用react-bootstrap。Project1使用react-bootstrap的所有组件，并在react-bootstrap组件上创建包装器（不要问为什么，这是必需的）。Project2应该使用Project1（导出时）作为react-bootstrap的包装器库。
项目1- >
index.js：
import { Bootstrap } from 'bootstrap/dist/css/bootstrap.css';
...
import Glyphicon from './src/components/Glyphicon';
...
export default {
...
Glyphicon,
...
};
src / components / 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。
项目2- >
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浏览器控制台中显示的错误：
现在，我知道该问题与字体有关。
即使我复制这些生成的字体文件并粘贴到Project2的根目录中，我仍然会遇到相同的错误。
我应该怎么做才能从Project1中导出这些字体文件，以便可以在Project2中使用它们？
| 归档时间： |
|
| 查看次数： |
7405 次 |
| 最近记录： |
