[英]How to use webpack custom config with react js?
I'm using a custom webpack config file which is:我正在使用自定义 webpack 配置文件,它是:
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: 'dist/bundle.js',
sourceMapFilename: 'dist/bundle.map'
},
devtool: '#source-map',
module: {
loaders: [
{
loader: 'babel-loader',
exclude: /(node_modules)/,
query: {
presets: [ 'react', 'es2015' ]
}
}
]
}
};
It throws an error when I run wepback
in terminal:当我在终端中运行wepback
时,它会引发错误:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
-> Options affecting the normal modules (`NormalModuleFactory`).
How can I use a custom config file for webpack properly and fix this error?如何正确使用 webpack 的自定义配置文件并修复此错误?
For using loaders of webpack
you should add rules
property with test regex indicating which files to transform.要使用webpack
的加载器,您应该添加带有测试正则表达式的rules
属性,以指示要转换的文件。
module: {
rules: [
{
test: /\.(jsx|js)$/
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [ 'react', 'es2015' ]
}
}
}
]
}
For more and precise information look at documentation related to the version you have used.有关更多和准确的信息,请查看与您使用的版本相关的文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.