react-toolbox 的 Webpack 4 配置答案

【问题标题】：Webpack 4 configuration for react-toolboxreact-toolbox 的 Webpack 4 配置
【发布时间】：2019-01-18 06:01:01
【问题描述】：

我尝试将我的应用从 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 的工作应用程序？此外，欢迎提供任何可能导致这些错误的提示！

【问题讨论】：

标签： reactjs webpack-4 toolbox

【解决方案1】：

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

最后，我有一个使用 webpack 4 和 react-toolbox 的 demo，它基于 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看到所有的设置，希望对你有用。

【讨论】：

不鼓励仅链接答案。