当前package.json中大约有20个漏洞，我决定开始对其进行升级。
将npm audit fix --force Webpack（和laravel混合）从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与webpack不兼容4我决定将其替换为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()
]
});
我尝试了许多变体，但是要么我一直出错，要么没有提取react组件中的CSS。
如何简单地将extract-text-webpack-plugin软件包替换为mini-css-extract-plugin软件包？我尝试继续使用laravel-mix，但是，如果那是导致问题的原因，我宁愿不用。