时间戳

首页 > 解决方案 > 模块构建失败：TypeError：无法读取未定义的属性“上下文” - Webpack

javascript - 模块构建失败：TypeError：无法读取未定义的属性“上下文” - Webpack

问题描述

我想建立我的项目

我写了这段代码来构建我的项目 npm run build 但我得到了这个错误：

ERROR in ./src/public/webfonts/fa-solid-900.svg
Module build failed: TypeError: Cannot read property 'context' of undefined
    at Object.loader (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/file-loader/dist/index.js:34:49)
 @ ./node_modules/css-loader??ref--5-1!./src/public/css/fontawesome-all.css 7:72144-72185
 @ ./src/public/css/fontawesome-all.css
 @ ./src/index.js

ERROR in ./src/public/webfonts/fa-brands-400.svg
Module build failed: TypeError: Cannot read property 'context' of undefined
    at Object.loader (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/file-loader/dist/index.js:34:49)
 @ ./node_modules/css-loader??ref--5-1!./src/public/css/fontawesome-all.css 7:70780-70822
 @ ./src/public/css/fontawesome-all.css
 @ ./src/index.js

这是我的webpack.config.js：

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./public/index.html",
    filename: "./index.html"
});

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                //test: /\.css$/,
                test:/\.(s*)css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: "[name]_[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true
                        }
                    }
                ]
            },
            {
                test: /.(ttf|otf|eot|png|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit : 8192
                        }
                    }
                ]
            },
            {
                test: /.(ttf|otf|eot|png|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'fonts/',
                            name: '[name][hash].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [htmlWebpackPlugin]
};

我不知道是什么问题！

我的操作系统是 macOS highSierra 版本 10.13.3
节点 js 版本 10
反应版本 16.2
我正在使用 npm 版本 6.0.1
webpack 版本 4。

我认为 webpack 不知道我的字体文件（如 ttf、otf、eot 等...）

标签： javascriptreactjswebpackwebpack-4

解决方案

此问题是由于 webpack v4 中引入的更改。在Webpack github (Incompatible loaders section)中检查这个问题。您可以使用站点下方建议的解决方法，即将另一个插件添加到您的 webpack 配置中，如下所示：

new LoaderOptionsPlugin({
  options: {
    context: process.cwd() // or the same value as `context`
  }
})

或者您可以将版本升级file-loader到解决此问题的v1.1.6 。

推荐阅读