Lui*_*cia 72 typescript reactjs webpack
我有一个简单的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？,resolve？,resolveLoader？,stats？,target？,watch？,watchOptions？错别字:请纠正它们.
对于加载程序选项:webpack 2不再允许配置中的自定义属性.应该更新加载程序以允许通过module.rules中的加载程序选项传递选项.在更新加载器之前,可以使用LoaderOptionsPlugin将这些选项传递给加载器:plugins:[new webpack.LoaderOptionsPlugin({// test:/.xxx$/,//可能仅适用于某些模块选项:{postcss: ...}})] - configuration.resolve有一个未知属性'root'.这些属性是有效的:object {alias？,aliasFields？,cachePredicate？,descriptionFiles？,enforceExtension？,enforceModuleExtension？,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'
}
}
}
};
Jam*_* L. 31
我通过从我的resolve数组中删除空字符串解决了这个问题.查看webpack网站上的解决方案文档.
//Doesn't work
module.exports = {
resolve: {
extensions: ['', '.js', '.jsx']
}
...
};
//Works!
module.exports = {
resolve: {
extensions: ['.js', '.jsx']
}
...
};
Rus*_*hit 23
请尝试以下步骤:
npm uninstall webpack --save-dev
其次是
npm install webpack@2.1.0-beta.22 --save-dev
然后你应该能够再次吞咽.解决了我的问题.
小智 22
我不确切知道是什么原因引起的,但我这样解决了.
重新安装整个项目,但请记住必须全局安装webpack-dev-server.
我浏览了一些像webpack一样的服务器错误,所以我使用link命令链接了Webpack.
在输出中解决一些绝对路径问题.
在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"
}
}
Jos*_*ora 16
我想你的webpack版本是2.2.1.我认为您应该使用此迁移指南 - > https://webpack.js.org/guides/migrating/
此外,您可以使用TypeSCript + Webpack 2的此示例.
问候!
o-0*_*o-0 16
对于像我这样最近开始的人: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;
小智 9
当您有冲突的版本（angular js）时，通常会发生此错误。所以 webpack 无法启动应用程序。您可以通过删除 webpack 并重新安装它来简单地修复它。
npm uninstall webpack --save-dev
npm install webpack --save-dev
重新启动您的应用程序，一切都很好。
我希望能够帮助某人。干杯
小智 7
我有同样的问题,我通过安装最新的npm版本解决了它:
npm install -g npm@latest
然后更改webpack.config.js文件以解决
- configuration.resolve.extensions [0]不应为空.
现在解析扩展应该如下所示:
resolve: {
extensions: [ '.js', '.jsx']
},
然后运行npm start.
小智 7
它通过使用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 webpack@2.1.0-beta.22，只需在“ webpack.config.js”中将“加载程序”更改为“规则” “和这个。因此，我决定提供对此问题的答案。
卸载并重新安装webpack或使用webpack的全局版本不能解决此问题。 重要的是要使用正确版本的webpack来配置文件。
如果在使用全局版本时此问题已得到解决，则可能意味着您的全局版本为“旧”，并且您使用的webpack.config.js文件格式为“旧”，因此它们匹配并且中提琴现在可以正常工作。我全力以赴，但希望读者知道为什么会这样。
每当您获得希望能够解决问题的Webpack配置时，请问自己：该配置适用于哪个版本的Webpack。
有很多很好的资源可以学习Webpack。一些是：
示例中的Webpack（v3？） -采用一口大小的方法来学习webpack，找出问题，然后说明如何在webpack中解决它。我喜欢这种方法。不幸的是，它不是在教webpack 4，但仍然不错。
重新开始设置Webpack4，Babel和React-这是React特有的，但是如果您想学习创建React单页应用程序所需的许多知识，那很好。
Webpack？（v3）—令人困惑的部分 -很好，涵盖了很多领域。它的日期为2016年4月10日，不涵盖webpack4，但是许多教学要点是有效的或对学习有用的。
通过示例可以学习到更多有用的资源，如果您认识其他人，请添加注释。希望将来的webpack文章会说明正在使用/解释的版本。
| 归档时间： |
|
| 查看次数： |
135570 次 |
| 最近记录： |