在我的项目根目录下有两个文件夹 - build 和 src。我想把 src 文件夹中的图片移动到 build 文件夹。但是,尽管我已经包含了url-loader插件,仍然出现“无法解析文件”的错误。
header.jsx
import {React, ReactDOM} from '../../build/react';
export default class Header extends React.Component {
render() {
return (
<div className="header">
<img className="logo" src={require("../src/content/images/program-brand-logo.jpg")} />
</div>
);
}
};
错误日志:
ERROR in ./src/components/header.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ../src/content/images/program-brand-logo.jpg in /Users/username/Desktop/Projects/Demo/Scorecard/SPA/React (Working Copy)/src/components
@ ./src/components/header.jsx 45:68-123
Webpack.config.js
var webpack = require('webpack');
var path = require('path');
require("babel-polyfill");
var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');
module.exports = {
entry: [
// Set up an ES6-ish environment
'babel-polyfill',
'bootstrap-loader',
'webpack/hot/dev-server',
APP_DIR + '/import.js',
],
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
}
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
}, {
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}, {
test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif)$/,
loader: 'url-loader?limit=100000'
}]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.HotModuleReplacementPlugin()
]
};