Question

我要构建我的项目

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

Answer 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，即可解决此问题。

模块构建失败：TypeError：无法读取未定义的属性'context'-反应js

1 个答案: