У меня есть это приложение helloworld для простого создания, созданное в онлайн-курсе, однако я получаю эту ошибку:
Неверный объект конфигурации. Webpack был инициализирован с использованием объект конфигурации, который не соответствует схеме API. - Конфигурация имеет неизвестное свойство postcss. Эти свойства действительны: object {amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsO utputPath?, recordsPath?, разрешить?, resolveLoader?, stats?, target?, watch?, watchOptions? } Для опечаток: пожалуйста, исправьте их.
Для параметров загрузчика: webpack 2 больше не позволяет настраивать свойства в конфигурации. Погрузчики должны быть обновлены, чтобы пропускать опции через параметры загрузчика в module.rules. До тех пор, пока загрузчики не будут обновлены, вы можете использовать LoaderOptionsPlugin для передачи этих параметров загрузчику: плагины: [ новый webpack.LoaderOptionsPlugin({ //test:/.xxx$/,//может применять это только для некоторых модулей опции: { postcss:... } }) ] - configuration.resolve имеет неизвестное свойство "root". Эти свойства действительны: object {alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, принудительно использоватьModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? } - configuration.resolve.extensions [0] не должно быть пустым.
Мой файл webpack:
// work with all paths in a cross-platform manner
const path = require('path');
// plugins covered below
const { ProvidePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// configure source and distribution folder paths
const srcFolder = 'src';
const distFolder = 'dist';
// merge the common configuration with the environment specific configuration
module.exports = {
// entry point for application
entry: {
'app': path.join(__dirname, srcFolder, 'ts', 'app.tsx')
},
// allows us to require modules using
// import { someExport } from './my-module';
// instead of
// import { someExport } from './my-module.ts';
// with the extensions in the list, the extension can be omitted from the
// import from path
resolve: {
// order matters, resolves left to right
extensions: ['', '.js', '.ts', '.tsx', '.json'],
// root is an absolute path to the folder containing our application
// modules
root: path.join(__dirname, srcFolder, 'ts')
},
module: {
loaders: [
// process all TypeScript files (ts and tsx) through the TypeScript
// preprocessor
{ test: /\.tsx?$/,loader: 'ts-loader' },
// processes JSON files, useful for config files and mock data
{ test: /\.json$/, loader: 'json' },
// transpiles global SCSS stylesheets
// loader order is executed right to left
{
test: /\.scss$/,
exclude: [path.join(__dirname, srcFolder, 'ts')],
loaders: ['style', 'css', 'postcss', 'sass']
},
// process Bootstrap SCSS files
{
test: /\.scss$/,
exclude: [path.join(__dirname, srcFolder, 'scss')],
loaders: ['raw', 'sass']
}
]
},
// configuration for the postcss loader which modifies CSS after
// processing
// autoprefixer plugin for postcss adds vendor specific prefixing for
// non-standard or experimental css properties
postcss: [ require('autoprefixer') ],
plugins: [
// provides Promise and fetch API for browsers which do not support
// them
new ProvidePlugin({
'Promise': 'es6-promise',
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
}),
// copies image files directly when they are changed
new CopyWebpackPlugin([{
from: path.join(srcFolder, 'images'),
to: path.join('..', 'images')
}]),
// copies the index.html file, and injects a reference to the output JS
// file, app.js
new HtmlWebpackPlugin({
template: path.join(__dirname, srcFolder, 'index.html'),
filename: path.join('..', 'index.html'),
inject: 'body',
})
],
// output file settings
// path points to web server content folder where the web server will serve
// the files from file name is the name of the files, where [name] is the
// name of each entry point
output: {
path: path.join(__dirname, distFolder, 'js'),
filename: '[name].js',
publicPath: '/js'
},
// use full source maps
// this specific setting value is required to set breakpoints in they
// TypeScript source in the web browser for development other source map
devtool: 'source-map',
// use the webpack dev server to serve up the web application
devServer: {
// files are served from this folder
contentBase: 'dist',
// support HTML5 History API for react router
historyApiFallback: true,
// listen to port 5000, change this to another port if another server
// is already listening on this port
port: 5000,
// proxy requests to the JSON server REST service
proxy: {
'/widgets': {
// server to proxy
target: 'http://0.0.0.0:3010'
}
}
}
};
Я точно не знаю, в чем причина, но я решаю это так.
Переустановите весь проект, но помните, что сервер webpack-dev должен быть установлен на глобальном уровне.
Я прохожу через некоторые ошибки сервера, такие как webpack can not found, поэтому я связал Webpack с помощью команды link.
В выпуске Решение некоторых проблем с абсолютным путём.
В object: inline: false
devServer object: inline: false
webpack.config.js
module.exports = {
entry: "./src/js/main.js",
output: {
path:__dirname+ '/dist/',
filename: "bundle.js",
publicPath: '/'
},
devServer: {
inline: false,
contentBase: "./dist",
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude:/(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
package.json
{
"name": "react-flux-architecture-es6",
"version": "1.0.0",
"description": "egghead",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/cichy/react-flux-architecture-es6.git"
},
"keywords": [
"React",
"flux"
],
"author": "Jarosław Cichoń",
"license": "ISC",
"bugs": {
"url": "https://github.com/cichy/react-flux-architecture-es6/issues"
},
"homepage": "https://github.com/cichy/react-flux-architecture-es6#readme",
"dependencies": {
"flux": "^3.1.2",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0"
}
}
Я решил эту проблему, удалив пустую строку из моего массива разрешений. Проверьте документацию разрешений на веб-сайт.
//Doesn't work
module.exports = {
resolve: {
extensions: ['', '.js', '.jsx']
}
...
};
//Works!
module.exports = {
resolve: {
extensions: ['.js', '.jsx']
}
...
};
Просто перейдите от "загрузчиков" к "правилам" в "webpack.config.js"
Поскольку загрузчики используются в Webpack 1 и правила в Webpack2. Вы видите, что есть различия.
Попробуйте выполнить следующие шаги:
npm uninstall webpack --save-dev
за которым следует
npm install [email protected] --save-dev
Затем вы снова сможете gulp. Исправлена проблема для меня.
Я предполагаю, что версия вашего веб-пакета 2.2.1. Я думаю, вы должны использовать это Руководство по миграции → https://webpack.js.org/guides/migrating/
Кроме того, вы можете использовать этот пример TypeSCript + Webpack 2.
Привет!
Для таких людей, как я, кто недавно начал: ключевое слово loaders
заменяется rules
; даже несмотря на то, что он по-прежнему представляет собой концепцию погрузчиков. Таким образом, мой webpack.config.js
для приложения React выглядит следующим образом:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
rules : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
}
]
}
};
module.exports = config;
Меня заменили "загрузчики" на "правила" (webpack v4)
В webpack.config.js заменить загрузчики: [..] с правилами: [..] Это сработало для меня.
У меня была такая же проблема, и я решил ее, установив последнюю версию npm:
npm install -g npm@latest
а затем измените файл webpack.config.js
, чтобы решить
- configuration.resolve.extensions [0] не должно быть пустым.
теперь разрешить расширение должно выглядеть так:
resolve: {
extensions: [ '.js', '.jsx']
},
затем запустите npm start
.
Он работает для меня, используя rules
вместо loaders
module : {
rules : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
}
]
}
Конфигурационный файл Webpack с годами изменился (вероятно, с каждой основной версией). Ответ на вопрос:
Почему я получаю эту ошибку
Invalid configuration object. Webpack has been initialised using a
configuration object that does not match the API schema
потому что файл конфигурации не соответствует используемой версии webpack.
В принятом ответе не говорится об этом, и другие ответы ссылаются на это, но не оговаривают это явно. Npm install [email protected]. Просто измените с "загрузчиков" на "правила" в "webpack.config.js ", и это. Поэтому я решил ответить на этот вопрос.
Удаление и переустановка webpack, или использование глобальной версии webpack не решит эту проблему. Использование правильной версии webpack для используемого файла конфигурации - вот что важно.
Если эта проблема была исправлена при использовании глобальной версии, это, скорее всего, означает, что ваша глобальная версия была "старой", а формат файла webpack.config.js, используемый вами, является "старым", так что они соответствуют друг другу, и теперь действуют альта. Я все для работы, но хочу, чтобы читатели знали, почему они работают.
Всякий раз, когда вы получаете конфигурацию webpack, которая, как вы надеетесь, решит вашу проблему... спросите себя, какая версия веб-пакета для конфигурации.
Есть много хороших ресурсов для изучения веб-пакета. Некоторые:
Webpack (v3?) По примеру - использует подход с размером укуса для изучения веб-пакета, выбора проблемы, а затем показывает, как его решить в webpack. Мне нравится этот подход. К сожалению, он не учит webpack 4, но по-прежнему хорош.
Настройка Webpack4, Babel и React с нуля, пересмотренная - это специфично для React, но хорошо, если вы хотите узнать много вещей, которые необходимы для создания однопользовательского приложения.
Webpack (v3) - The Confusing Parts - Хорошо и покрывает много земли. Он датирован 10 апреля 2016 года и не распространяется на webpack4, но многие учебные точки действительны или полезны для изучения.
Есть намного больше хороших ресурсов для изучения webpack4, например, добавьте комментарии, если вы знаете других. Будем надеяться, что в будущих статьях webpack будут указаны используемые/объясненные версии.
У меня возникло такое же сообщение об ошибке при вводе webpack в проект, который я создал с помощью npm init.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "dist/assets" is not an absolute path!
Я начал использовать пряжу, которая исправила проблему для меня:
brew update
brew install yarn
brew upgrade yarn
yarn init
yarn add webpack webpack-dev-server path
touch webpack.config.js
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
yarn add html-webpack-plugin
yarn start
Я нашел следующую ссылку полезной: Настройка среды React с использованием веб-пакета и Babel
Эта ошибка возникает, когда я использую path.resolve(), чтобы настроить параметры "запись" и "вывод".
entry: path.resolve(__dirname + '/app.jsx')
. Просто попробуйте entry: __dirname + '/app.jsx'
Я имею ту же ошибку, что и вы.
npm удалить webpack --save-dev
&
npm install [email protected] --save-dev
решить это!
Я не знаю, в чем именно ошибка. Но в моем случае я установил компонент bootstrap дважды, и его авто сгенерировал строку стиля css в angular.json.
Я удаляю линию и ее работу отлично. Поэтому прочитайте полную ошибку, чтобы противостоять причине маршрута.
Я изменил загрузчики на правила в файле webpack.config.js
и обновил пакеты html-webpack-plugin
, webpack
, webpack-cli
webpack-dev-server
, webpack-dev-server
до последней версии, после чего он работал для меня!