在webpack中生成进程时出错

Question

我使用的是amberframework，它有内置的webpack构建。问题是，当我试图通过scs导入图像时，它无法处理图像文件，也无法找到我所理解的图像文件。

问题是大部分源代码都位于名为src的文件夹中，资产也是如此。在构建步骤中，它应该将文件传输到公用文件夹，但没有，而是输出这个奇怪的错误。

错误：

ERROR in ./src/assets/stylesheets/main.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './images/transparent.jpg' in '/Users/niko/code/blog/src/assets/stylesheets'
at factoryCallback (/Users/niko/code/blog/node_modules/webpack/lib/Compilation.js:282:40)
at factory (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:237:20)
at resolver (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
at asyncLib.parallel (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
at /Users/niko/code/blog/node_modules/async/dist/async.js:3888:9
at /Users/niko/code/blog/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/niko/code/blog/node_modules/async/dist/async.js:1062:13)
at /Users/niko/code/blog/node_modules/async/dist/async.js:969:16
at /Users/niko/code/blog/node_modules/async/dist/async.js:3885:13
at resolvers.normal.resolve (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
at onError (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:252:11)
at /Users/niko/code/blog/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:252:11)
at innerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:168:10)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:252:11)
@ ./src/assets/stylesheets/main.scss
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/stylesheets/main.scss
Module not found: Error: Can't resolve './images/transparent.jpg' in '/Users/niko/code/blog/src/assets/stylesheets'
@ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/stylesheets/main.scss 7:83-118
@ ./src/assets/stylesheets/main.scss

代码webpack文件：

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
let config = {
entry: {
'main.bundle.js': './src/assets/javascripts/main.js',
'main.bundle.css': './src/assets/stylesheets/main.scss'
},
output: {
filename: '[name]',
path: path.resolve(__dirname, '../../public/dist'),
publicPath: '/dist'
},
resolve: {
alias: {
amber: path.resolve(__dirname, '../../lib/amber/assets/js/amber.js')
}
},
module: {
rules: [
{
test: /.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /.(png|svg|jpg|gif)$/,
exclude: /node_modules/,
use: [
'file-loader?name=/images/[name].[ext]'
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
exclude: /node_modules/,
use: [
'file-loader?name=/[name].[ext]'
]
},
{
test: /.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['env']
}
}
]
},
plugins: [
new ExtractTextPlugin('main.bundle.css'),
],
// For more info about webpack logs see: https://webpack.js.org/configuration/stats/
stats: 'errors-only'
};
module.exports = config;

Answer 1

这部分错误代码告诉我们出了什么问题。相对路径不正确。Module not found: Error: Can't resolve './images/transparent.jpg' in '/Users/niko/code/blog/src/assets/stylesheets'

它正在寻找/Users/niko/code/blog/src/assets/stylesheets/images/transparent.jpg

当您引用sass文件中的jpg时，它应该是一个带点斜杠的文件夹。../images/transparent.jpg。它将从资产中查找，而不是开始在样式表中查找。