Webpack:无法解析模块'file-loader'

l7wslrjt  于 2022-12-13  发布在  Webpack
关注(0)|答案(6)|浏览(206)

当我尝试使用Webpack构建***SASS***文件时,出现以下错误:
找不到模块:错误:无法解析模块'file-loader'
请注意,只有当我尝试使用相对路径加载背景图像时,才会出现此问题。
此工作很好:

background:url(http://localhost:8080/images/magnifier.png);

这会导致以下问题:

background:url(../images/magnifier.png);

这是我的项目结构

  • 影像
  • 样式
  • webpack.config.js

这是我的网络包文件:

var path = require('path');
module.exports = {
    entry: {
        build: [
            './scripts/app.jsx',
            'webpack-dev-server/client?http://localhost:8080',
            'webpack/hot/only-dev-server'
        ]
    },
    output: {
        path: path.join(__dirname, 'public'),
        publicPath: 'http://localhost:8080/',
        filename: 'public/[name].js'
    },
    module: {
        loaders: [
            {test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/},
            {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
            {test: /\.(png|jpg)$/, loader: 'file-loader'},
            {test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader'}
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.scss', '.eot', '.ttf', '.svg', '.woff'],
        modulesDirectories: ['node_modules', 'scripts', 'images', 'fonts']
    }
};
btxsgosb

btxsgosb1#

正如@silvenon在评论中所说:
您是否安装了文件加载程序?
是的,***文件加载程序***已安装,但已损坏,通过重新安装,我的问题已得到解决。
npm install --save-dev file-loader

4xy9mtcn

4xy9mtcn2#

如果您使用的url-loader具有已定义的limit配置,您可能会遇到非常类似的问题As the documentation states,如果您尝试加载的资源超过此限制,则file-loader将用作备用。因此,如果您没有安装file-loader,则会出现错误提示。要修复此错误,请将此限制设置为更大的值或根本不定义它。

{
        test: /\.(jpg|png|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 50000, // make sure this number is big enough to load your resource, or do not define it at all.
          }
        }
      }
r1zhe5dt

r1zhe5dt3#

我有完全相同的问题和以下修复它:

loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"
jhdbpxl9

jhdbpxl94#

感谢这一点-这是最后一块得到Bootstrap,d3 js,Jquery,base64内联图像和我自己写得很差的JS玩webpack。
要回答上述问题和解决问题的方法

**找不到模块:错误:无法解析模块'url'**编译引导字体时

{ 
test: /glyphicons-halflings-regular\.(woff2|woff|svg|ttf|eot)$/,
loader:require.resolve("url-loader") + "?name=../[path][name].[ext]"
}

谢谢你!

tzxcd3kk

tzxcd3kk5#

如果在运行jest时遇到此问题,请将其添加到moduleNameMapper

"ace-builds": "<rootDir>/node_modules/ace-builds"
ne5o7dgx

ne5o7dgx6#

Error - ./node_modules/@fortawesome/fontawesome-free/css/all.min.cssdisabled.
     Error: Module not found: Can't resolve 'url-loader'

通过安装url-loader(例如:run 'npm install url-loader --save-dev'

相关问题