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>
);

titles.json

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

我没有在webpack.config文件中包含json loader，因为我发现默认情况下在webpack中添加了json loader，当我在控制台中检入浏览器时出现此错误 - ＆gt; ReferenceError：未定义ReactDOM。

我在CLI中遇到错误

//文件夹结构

Answer 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',
          },
        ],
      },
    ],
  },

模块构建失败：TypeError：无法在Object.module.exports中读取未定义的属性“context”

1 个答案: