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

【问题标题】：Module build failed: TypeError: Cannot read property 'context' of undefined - Webpack模块构建失败：TypeError：无法读取未定义的属性“上下文” - Webpack
【发布时间】：2018-12-12 11:01:42
【问题描述】：

我想建立我的项目

我编写了这段代码来构建我的项目 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 等...）

【问题讨论】：

嘿，你能在这里分享 package.json 文件吗？我猜你需要添加一个新插件

标签： javascript reactjs webpack webpack-4

【解决方案1】：

此问题是由于 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 以解决此问题。

【讨论】：

感谢@Ragul Parani，升级部分完成了这项工作。