css - react CSS 的 webpack 配置

Question

我是 Webpack 的新手，所以我的问题很可能是显而易见的，而且我提早问了 100 次，但我就是无法将它们联系起来。也许。

我有小型 Express - Ract - Gprahql - Semantic-ui 元素。我需要将它与 Webpack 绑定(bind)在一起，我完全无法理解它的逻辑。我需要为组件添加样式，我想应该使用 css-module 吗？ (是吗？)并在 webpack.config 的模块部分添加一些神奇的内容。到目前为止(在没有自定义 css 的情况下工作)它看起来像这样:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './client/index.js',
  output: {
    path: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.jsx$/,
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'client/index.html'
    })
  ]
};

我在文档中发现我需要 css 和样式加载器(不管它是什么意思)所以我安装了正确的包并将对象添加到 module.rules:

  {
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
  }

我得到的只是编译时的错误。

You may need an appropriate loader to handle this file type.
|   const Root = () => {
|     return (
|           <ApolloProvider client={client}>
|             <Router history={hashHistory}>
|               <Route path="/" component={App}>

我希望我能在询问之前进行更多调查，但我不知道从哪里开始。如果您需要，这是我的 repo 协议(protocol):https://bitbucket.org/don_Kamillo/ranking/src

Answer 1

目前，您似乎没有.js 文件的加载程序。这是因为你的 babel-loader 配置了 .jsx$。如果您希望 x 是可选的，请使用 .jsx?$:

module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.jsx?$/,
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },