安装 webpack css-loader 时出现 React-redux 错误

Question

尝试将 css-loader 与 react-redux 一起使用，并在将模块放入 webpack.config.js（代码）时给我一些错误：

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/i,
            use: {loader:"css-loader"},
          },
        ],
      },
    };

或者，我试过了：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
 module: {
        rules: [
          {
            test: /\.css$/i,
            use: {loader:"css-loader"}
          }
        ]
      },
};

结果相同 错误：

Module parse failed: Unexpected token (32:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   render() {
|     return (
>       <Provider store={store}>
|         <AlertProvider template={AlertTemplate} {...alertOptions}>
|           <Router>
 @ ./leadmanager/frontend/src/index.js 1:0-35

webpack 5.53.0 compiled with 1 error in 204 ms

和 React-Redux 文件：

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';

import Header from './layout/Header';
import Dashboard from './leads/Dashboard';
import Alerts from './layout/Alerts';
import Login from './accounts/Login';
import Register from './accounts/Register';
import PrivateRoute from './common/PrivateRoute';

import { Provider } from 'react-redux';
import store from '../store';
import { loadUser } from '../actions/auth';

// Alert Options
const alertOptions = {
  timeout: 3000,
  position: 'top center',
};

class App extends Component {
  componentDidMount() {
    store.dispatch(loadUser());
  }

  render() {
    return (
      <Provider store={store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Router>
            <Fragment>
              <Header />
              <Alerts />
              <div className="container">
                <Switch>
                  <PrivateRoute exact path="/" component={Dashboard} />
                  <Route exact path="/register" component={Register} />
                  <Route exact path="/login" component={Login} />
                </Switch>
              </div>
            </Fragment>
          </Router>
        </AlertProvider>
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

我真的不明白为什么会发生这种情况，我想知道是否有人可以解释我如何解决这个错误或者 webpack css-loader 如何影响 Redux 对象.Thx!!

Answer 1

看起来您正在覆盖 webpack 规则，特别是将 *.js 替换为 *.css。在同一个数组中指定多个。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/i,
        use: {loader:"css-loader"},
      },
    ],
  },
};