模块构建失败：TypeError：无法读取 Object.module.exports 处未定义的属性“上下文”答案

【问题标题】：Module build failed: TypeError: Cannot read property 'context' of undefined at Object.module.exports模块构建失败：TypeError：无法读取 Object.module.exports 处未定义的属性“上下文”
【发布时间】：2018-09-10 00:39:12
【问题描述】：

我在安装 webpack 后遇到了这个异常错误，搜索了整个 web 尝试了所有解决方案，但没有任何效果，

//我的 webpack.config.js 文件

const webpack = require("webpack");
const path = require("path");
const config = {
    entry : path.resolve(__dirname,"src/index.js"),
    output : {
        path : path.resolve(__dirname,"dist/assets"),
        filename : "bundle.js",
        publicPath : "assets"
    },
    devServer : {
        inline : true,
        contentBase : path.resolve(__dirname,"dist"),
        port : 3000
    },
    module : {
        rules : [
            {
                test : /\.js$/,
                exclude : path.resolve(__dirname,"node_modules"),
                loader : "babel-loader",
                query: {
                    presets: ["env","latest","react","stage-0","es2015"]
                }
            },
            {
                test : /\.css$/,
                loader: 'style-loader!css-loader!autoprefixer-loader'
            },
            {
                test : /\.scss$/,
                loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'
            }
        ]
    }
};
module.exports = config;

我的 babelrc 文件

{
  "presets" : ["env","latest","react","stage-0","es2015"]
}

Index.js 文件

import React from 'react'
import ReactDOM from 'react-dom'
import { hello, goodbye } from './lib'

ReactDOM.render(
    <div>
        {hello}
        {goodbye}
    </div>,
    document.getElementById('root')
);

lib.js 文件

import React from 'react'
import  text from './titles.json'
import './stylesheets/hello.css'
import './stylesheets/goodbye.scss'

export const hello = (
    <h1 id="title"
        className="hello">
        {text.hello}
    </h1>
);
export const goodbye = (
    <h2 id="goodbye"
        className="goodbye">
        {text.bye}
    </h2>
);

titles.json

{
  "hello" : "Bonjour",
  "bye" : "Au Revoir"
}

我没有在 webpack.config 文件中包含 json 加载器，因为我发现 webpack 中默认添加了 json 加载器，当我在控制台中检查浏览器时出现此错误 -> ReferenceError: ReactDOM is not defined.

我在 CLI 中遇到的错误

//文件夹结构

【问题讨论】：

有一堆问题like that与webpack 4冲突。我创建了PR，但我不确定合并和发布需要多长时间。

标签： javascript reactjs webpack webpack-dev-server babel-loader

【解决方案1】：

解决方案似乎是围绕删除 autoprefixer-loader，我不确定，但可能不再需要包含它，因为它是作为加载器之一的一部分包含或内置在较新版本中的的 webpack。再次，我只是在这里推测。

当前的 bang (!) 参数分隔语法似乎仍然有效

{
  test: /\.scss$/,
  loader: 'style-loader!css-loader!sass-loader',
}

但是 webpack 文档似乎更喜欢下面的分解样式

webpack sass-loader

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['env', 'react'],
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },

【讨论】：