我的Storybook Webpack配置出现配置错误。
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[0].include should be one of these:
ERR! RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
我尝试导入的一组Webpack规则似乎有问题。此工作在我的另一个版本中进行，但是由于某种原因在这里不起作用？！
我尝试将webpack / storybook版本更改为稍旧的版本，并确保NPM软件包与我以前的版本匹配。
webpack.config.js（在.storybook文件夹中）
const { resolve } = require('path');
module.exports = (baseConfig, env, defaultConfig) => {
const rulesFn = require('../.webpack/rules.js').rules;
const rules = rulesFn(
{
outputLegacy: '',
generated: '',
output: '',
src: '',
},
input => input['development'],
input => input['modern'],
);
delete rules[1].include;
defaultConfig.module.rules = rules;
defaultConfig.resolve.extensions = ['.ts', '.tsx', '.js'];
return defaultConfig;
};
rules.js在.webpack文件夹中
const { configureBabel } = require('../_babel.config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
/**
* @param themePaths {ThemePaths}
* @param selectMode {SelectMode}
* @param selectTarget {SelectTarget}
* @returns {*[]}
*/
function rules(themePaths, selectMode, selectTarget) {
const babelOptions = configureBabel(selectMode, selectTarget);
const babelEnvDeps = require('webpack-babel-env-deps');
return [
{
include: [
path.resolve(__dirname, '..', 'server'),
path.resolve(__dirname, '..', 'runtime'),
themePaths.src,
themePaths.generated,
path.resolve(__dirname, '..', 'node_modules', 'debug'),
babelEnvDeps.include(),
],
// exclude: [/node_modules/],
test: /\.(ts|tsx|mjs|js|svg|graphql)$/,
use: [
{
loader: 'babel-loader',
options: babelOptions,
},
],
},
{
test: [/\.scss$/],
use: [
selectMode({ development: 'style-loader' }),
selectMode({ production: MiniCssExtractPlugin.loader }),
{
loader: 'css-loader',
options: {
importLoaders: 1,
localIdentName: '[name]-[local]-[hash:base64:3]',
modules: false,
},
},
{
loader: 'sass-loader',
options: {
data: `
@import "_vars";
@import "_mixins";
@import "_normalize";
@import "_reset";
`,
includePaths: ['src/scss'],
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [require('autoprefixer')()],
},
},
'resolve-url-loader',
].filter(Boolean),
},
{
test: /\.(jpe?g|png|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
{
test: /\.(woff2?)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
];
}
module.exports.rules = rules;
package.json
在根中
{
"name": "eat",
"version": "1.0.0",
"description": "Killer Storybook Config",
"scripts": {
"start": "HTTPS=true webpack-dev-server --mode development --open --hot",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9001 -c .storybook",
"precommit": "lint-staged",
"eslint:global": "eslint src -c src/.eslintrc.js --ext .js,.jsx,.tsx,.ts",
"eslint:global:fix": "eslint --fix src -c src/.eslintrc.js --ext .js,.jsx,.tsx,.ts"
},
"lint-staged": {
"src/**/*.{js,jsx,tsx,json,css}": [
"prettier --write",
"git add"
]
},
"keywords": [
"Storybook",
"Webpack",
"React",
"Typescript"
],
"author": "Harry Ghazni",
"license": "ISC",
"dependencies": {
"@babel/cli": "^7.2.3",
"@types/jest": "24.0.0",
"@types/node": "10.12.24",
"@types/react": "^16.8.14",
"@types/react-dom": "^16.8.0",
"@types/react-router-dom": "^4.3.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.18.3",
"classnames": "^2.2.6",
"concurrently": "^4.1.0",
"cors": "^2.8.5",
"mongoose": "^5.4.9",
"nodemon": "1.18.9",
"open": "^6.2.0",
"open-cli": "^1.0.5",
"postcss-sass-loader": "^1.1.0",
"postcss-scss": "^2.0.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-modal": "^3.8.1",
"react-router": "^4.3.1",
"react-scripts": "2.1.3",
"react-transition-group": "^4.0.1",
"resolve-url-loader": "^3.1.0",
"st": "^1.2.2",
"webpack-babel-env-deps": "^1.5.0"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"@csstools/postcss-sass": "^4.0.0",
"@storybook/addon-knobs": "4.0.4",
"@storybook/react": "^4.0.7",
"@types/storybook__addon-knobs": "5.0.1",
"@types/storybook__react": "^4.0.2",
"@types/webpack-env": "^1.13.9",
"@typescript-eslint/eslint-plugin": "^1.11.0",
"@typescript-eslint/parser": "^1.11.0",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "8.0.4",
"connect": "^3.6.6",
"crossbow": "^4.3.3",
"css-loader": "^2.1.0",
"eslint": "^6.0.1",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"fs": "0.0.1-security",
"html-webpack-plugin": "^3.2.0",
"https": "^1.0.0",
"lint-staged": "^8.2.1",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "4.11.0",
"postcss-loader": "^3.0.0",
"react-router-dom": "^4.3.1",
"sass-loader": "7.1.0",
"style-loader": "^0.23.1",
"typescript": "^3.3.3",
"webpack": "^4.28.4",
"webpack-cli": "3.3.1",
"webpack-dev-server": "3.3.1"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"main": "index.js",
"repository": "git@github.com:hghazni/killer-storybook-config.git"
}
我希望能够摆脱该错误并运行能够使用全局scss变量的故事书。希望有人能看到我所缺少的！