用于react-toolbox的Webpack 4配置

Question

我尝试将我的应用程序从webpack 2升级到webpack 4.16.5。因为我不想再以难以理解的数百行配置结束，所以我从一个最小的配置开始。这是我目前的：

const path = require("path");

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const context = path.resolve(__dirname, "app");

module.exports = {
  entry: {
    home: "./index.js"
  },
  context,

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.(css|sass|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader"
          },
          {
            loader: "postcss-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  resolve: {
    extensions: [".js", ".jsx", ".css", "json"],
    modules: [path.resolve(__dirname, "node_modules"), context]
  }
};

但是我遇到了从react-toolbox导入CSS文件的问题，即：

import Dialog from 'react-toolbox/lib/dialog';

在一个js文件中也是

@import "react-toolbox/lib/button/theme.css";

导致这样的错误：

ERROR in ../node_modules/react-toolbox/lib/switch/theme.css (../node_modules/css-loader!../node_modules/postcss-loader/src!../node_modules/sass-loader/lib/loader.js!../node_modules/react-toolbox/lib/switch/theme.css)
    Module build failed (from ../node_modules/css-loader/index.js):
    Error: composition is only allowed when the selector is single: local class name not in ".disabled", ".disabled" is weird

有没有人有一个使用wbpack4和react-toolbox的工作应用程序？此外，欢迎任何可能导致这些错误的提示！

Answer 1

我正在学习react.js与js stack from scratch教程并尝试使用react-toolbox组件。

Finnaly，我有一个工作demo与webpack 4和react-toolbox，它基于react-toolbox-example。

这是我的设置：

• 添加css-modules相关包 $ npm install postcss postcss-cssnext postcss-import postcss-loader css-loader style-loader
• 添加一个postcss.config.js

  module.exports = {
    plugins: {
      'postcss-import': {
        root: __dirname,
      },
      'postcss-cssnext': {}
    },
  };

• 添加webpack规则

  ...
  { test: /\.css$/, use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: true,
        importLoaders: 1,
        localIdentName: '[name]--[local]--[hash:base64:8]'
      }
    },
    'postcss-loader'
  ]},
  ...

• 添加cmrh.conf.js - 使用css-modules-require-hook进行SSR（可选）

  module.exports = {
    generateScopedName: '[name]--[local]--[hash:base64:8]'
  }

您可以在here中查看所有设置，希望它能为您服务。