javascript - 模块构建失败 : TypeError: Cannot read property 'context' of undefined at Object. module.exports

Question

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

//我的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>
);

标题.json

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

我没有在 webpack.config 文件中包含 json 加载器，因为我发现 json 加载器默认添加到 webpack 中，当我在控制台中检查浏览器时，我收到此错误 -> ReferenceError: ReactDOM 未定义。

我在 CLI 中遇到的错误

//文件夹结构

Answer 1

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

当前的 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',
          },
        ],
      },
    ],
  },