我的树视图:
- app
- App.js
- assets
- Linux.png
- render-web.js
- webpack.config.js
我的配置:
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?https://localhost:9000',
'webpack/hot/only-dev-server',
'./render-web'
],
output: {
path: path.join(__dirname, 'assets'),
filename: 'bundle.js',
publicPath: '/assets/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
compress: true,
https: true,
historyApiFallback: true,
inline: false,
port: 9000,
hot: true,
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
ast: false,
babelrc: false,
comments: false,
minified: true,
presets: ['es2015', 'react', 'stage-0'],
plugins: ['syntax-flow', 'react-hot-loader/babel'],
}
},
{
test: /node_modules\/react-native/,
loader: 'ignore-loader',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'url-loader?limit=9999999',
]
},
],
},
};
我的输入文件:
/* globals document */
import {AppContainer} from 'react-hot-loader';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';
const rootElement = document.getElementById('reactors');
ReactDOM.render(
<AppContainer>
<App />
</AppContainer>,
rootElement
);
if (module.hot) {
module.hot.accept('./app/App', () => {
const NextApp = require('./app/App').default;
ReactDOM.render(
<AppContainer>
<NextApp />
</AppContainer>,
rootElement
);
});
}
然后从app/App.js
:
import LinuxIcon from '../assets/Linux.png';
<img src={LinuxIcon} />
路径是正确的(如果我更改它,webpack会抱怨它不存在)。
它会生成base64图像:
data:image/png;base64,77+...too long to paste
但它只显示一个空白方块(无图像)。 我做错了什么?谢谢!
BTW使用:
file-loader@0.10.0
url-loader@0.5.7
webpack@2.2.1
webpack-dev-server@2.3.0
PS 我试图将assets
目录移至App
,正如我所见,但没有运气。