文件加载器,网址,装载机的WebPack不加载图像
问题描述:
我想导入的图像在我的代码做出反应,像这样(我用巴贝尔):文件加载器,网址,装载机的WebPack不加载图像
import borgCube from '../assets/cube.png';
<img className="img-rounded" src={borgCube}></img><p />
我看到了什么,当我检查在浏览器中破碎的图像:
<img class="img-rounded" src="data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI5NTU1ZGJiNWQ3YjUzMjA3N2NjNWQyMzc4ZDgzNzVmZS5wbmciOw==">
它曾经工作,直到我加入到css模块。这是我的WebPack的配置是什么样子:
var webpack = require('webpack');
var path = require('path');
var combineLoaders = require('webpack-combine-loaders');
const isDebug = !process.argv.includes('--release');
module.exports = {
devtool: 'eval',
entry: {
app: [
'webpack-dev-server/client?http://0.0.0.0:3000',
'webpack/hot/only-dev-server',
'./src/index'
]
},
output: {
filename: '[name].js',
path: path.join(__dirname, './build'),
publicPath: 'http://localhost:3000/build/'
},
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.png'],
modulesDirectories: ['src', 'node_modules']
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
},
{ test: /\.(woff|png)$/, loader: 'url-loader?limit=10000' },
{ test: /\.(png|jpg)$/, loader: 'file-loader'},
{
test: /\.css$/,
loader: combineLoaders([
{
loader: 'style-loader'
}, {
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
])
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
})
]
};
答
这个固定:
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
},
{
test: /\.css$/,
loader: combineLoaders([
{
loader: 'style-loader'
}, {
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
])
},
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: "url-loader?limit=100000" },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
],
},
+0
这节省了我的时间,非常感谢!顺便说一下,它看起来像一个印刷错误:“minetype = application/font-woff”。它似乎应该是“mimetype =”,不是吗? – ASten
可以给它一个尝试使用'装载机:[ '风格加载器',{装载机:“CSS-装载机',查询:{/ *您的查询对象* /}]'而不是调用'combineLoaders'?注意它是'loaders',然后,而不是'loader'。 – dotcs