webpack构建过程中的错误

Question

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

大部分源代码位于名为 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。它不会从样式表中开始查找，而是从资产中查找。