我正在尝试将React应用程序部署到Heroku。在我的应用程序中,我使用Flag Spirtes(https://www.flag-sprites.com/),因此我的目录中有一个文件夹和图像。
我已经将webpack配置为使用文件加载器加载它,并且当我在本地生产模式下运行服务器时似乎工作正常。但是,当我尝试部署到Heroku时,我收到以下错误:
ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/flags/flags.css
remote: Module not found: Error: Can't resolve 'file-loader' in '/tmp/build_0792dbd9d1cc095cd6dcf8783b3ad91a'
remote: @ ./~/css-loader!./~/sass-loader/lib/loader.js!./src/flags/flags.css 6:180-202
remote: @ ./src/flags/flags.css
remote: @ ./src/index.js
remote: @ multi ./src/index.js
下面是我的文件夹目录的图片:
我的webpack.config.js:
var webpack = require('webpack');
module.exports = {
entry: [
'./src/index.js'
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: [/\.css$/, /\.scss$/],
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader'
]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
historyApiFallback: true
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};
添加图片非常新,所以可以使用一些新手解释:)