reactjs - Laravel mix 4 (Webpack 4) & React CSS 模块

Question

我当前的 package.json 中有大约 20 个漏洞，我决定开始升级它们。

在npm audit fix --forcewebpack (&​​ laravel mix) 从 2.x 更新到 4.x之后。

我正在运行一个带有 CSS 模块 ( react-css-modules) 的 React webapp，并且还使用ExtractTextPlugin. 但是，两者ExtractTextPlugin似乎react-css-modules都已被弃用。

我当前的 webpack.mix.js（这在 webpack 2 上运行良好）：

'use strict';

let mix                 = require('laravel-mix');
let ExtractTextPlugin   = require('extract-text-webpack-plugin');
let LiveReloadPlugin    = require('webpack-livereload-plugin');
let path                = require('path');

const backendExtract = new ExtractTextPlugin("css/backend/app.min.css");

mix.react('resources/assets/backend/js/app.js', 'public/dashboard_assets/js')
.sass('resources/assets/frontend/sass/core.scss', 'css/frontend.min.css')
.sass('resources/assets/backend/sass/custom.scss', 'css/backend/custom.min.css')
.webpackConfig({
   module: {
     "rules": [
       {
         "test": /\.css$/,
         "loader": backendExtract.extract({
                 "fallback": "style-loader",
                 "use": "css-loader?modules=true&localIdentName=[name]__[local]--[hash:base64:6]&minimize=true"
         })
       }
   ]
   },
   "plugins": [
        backendExtract,
        new LiveReloadPlugin()
    ]
});

我的 package.json 中的依赖项

"devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "babel-preset-react": "^6.23.0",
    "bootstrap": "^4.1.3",
    "cross-env": "^5.2.0",
    "laravel-mix": "^2.1.14",
    "lodash": "^4.17.11",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "webpack-livereload-plugin": "^1.2.0"
},
"dependencies": {
    "axios": "^0.17.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "imagemin": "^6.0.0",
    "jquery": "^3.2",
    "js-cookie": "^2.2.0",
    "popper.js": "^1.14.6",
    "prettysize": "^2.0.0",
    "react": "^16.6.3",
    "react-dom": "^16.2.0",
    "react-css-modules": "^4.7.8",
    "react-redux": "^5.1.1",
    "react-router-dom": "^4.3.1",
    "react-scroll": "^1.7.11",
    "react-select-country-list": "^1.0.7",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "style-loader": "^0.20.3"
}

由于extract-text-webpack-plugin与webpack4 不兼容，我决定将其替换为mini-css-extract-plugin. 但是现在我不断收到此错误：

Error: Rule can only have one result source (provided use and loaders) in {
  "test": {},
  "loaders": [
    "style-loader",
    {
      "loader": "css-loader",
      "options": {
        "importLoaders": 1
      }
    },
    {
      "loader": "postcss-loader",
      "options": {
        "plugins": [
          null,
          null,
          null
        ]
      }
    }
  ],
  "use": [
    "style-loader",
    {
      "loader": "/path-to-project/node_modules/mini-css-extract-plugin/dist/loader.js",
      "options": {
        "hmr": true
      }
    },
    {
      "loader": "css-loader",
      "options": {
        "importLoaders": 1
      }
    },
    {
      "loader": "postcss-loader",
      "options": {
        "plugins": [
          null,
          null,
          null
        ]
      }
    }
  ]
}
    at checkUseSource (/path-to-project/node_modules/webpack/lib/RuleSet.js:149:11)
    at Function.normalizeRule (/path-to-project/node_modules/webpack/lib/RuleSet.js:287:4)
    at rules.map (/path-to-project/node_modules/webpack/lib/RuleSet.js:110:20)
    at Array.map (<anonymous>)
    at Function.normalizeRules (/path-to-project/node_modules/webpack/lib/RuleSet.js:109:17)
    at new RuleSet (/path-to-project/node_modules/webpack/lib/RuleSet.js:104:24)
    at VueLoaderPlugin.apply (/path-to-project/node_modules/vue-loader/lib/plugin.js:35:23)
    at webpack (/path-to-project/node_modules/webpack/lib/webpack.js:47:13)
    at processOptions (/path-to-project/node_modules/webpack-cli/bin/cli.js:256:16)
    at yargs.parse (/path-to-project/node_modules/webpack-cli/bin/cli.js:366:3)
    at Object.parse (/path-to-project/node_modules/yargs/yargs.js:567:18)
    at /path-to-project/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/path-to-project/node_modules/webpack-cli/bin/cli.js:368:3)
    at Module._compile (internal/modules/cjs/loader.js:738:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Module.load (internal/modules/cjs/loader.js:630:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
    at Function.Module._load (internal/modules/cjs/loader.js:562:3)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/path-to-project/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:738:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Module.load (internal/modules/cjs/loader.js:630:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
    at Function.Module._load (internal/modules/cjs/loader.js:562:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
    at internal/main/run_main_module.js:21:11

在我的中有以下内容webpack.mix.js：

'use strict';

let mix                 = require('laravel-mix');
let LiveReloadPlugin    = require('webpack-livereload-plugin');
let path                = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

mix.react('resources/assets/backend/js/app.js', 'public/dashboard_assets/js')
.sass('resources/assets/frontend/sass/core.scss', 'css/frontend.min.css')
.sass('resources/assets/backend/sass/custom.scss', 'css/backend/custom.min.css')
.webpackConfig({
    module: {
      "rules": [
        {
          "test": /\.css$/,
          use: [
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
               hmr: process.env.NODE_ENV === 'development',
             },
           },
           'css-loader',
         ],
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
      }),
      new LiveReloadPlugin()
    ]
});

我尝试了很多变体，但要么我不断出错，要么没有提取反应组件中的 CSS。

我怎样才能简单地用包替换extract-text-webpack-plugin包mini-css-extract-plugin？我尝试继续使用 laravel-mix，但如果这是导致问题的原因，我宁愿不使用。

标签： reactjslaravelwebpacklaravel-mixmini-css-extract-plugin