我遇到webpack --watch
的问题。整个配置以前工作,但我不得不再次安装我的开发环境,并在终端中运行webpack --watch
时开始收到错误:
ERROR in ./src/modules/page-builder/page.builder.js
Module build failed: ReferenceError: [BABEL] .../src/modules/app/app.js: Unknown option: .../src/bundle/ui-dev/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: ".../src/bundle/ui-dev/node_modules/react/index.js")
我的.babelrc
如下所示:
{
"presets": [
"react",
[
"env",
{
"targets": {
"browsers": ["last 1 version"]
}
}
]
],
"plugins": ["transform-react-remove-prop-types", "transform-object-rest-spread"]
}
我的webpack.config.js
如下:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
App: './src/modules/app/app.js',
},
output: {
filename: '[name].module.js',
path: path.resolve(__dirname, '../Resources/public/js/modules'),
library: ['modules', '[name]'],
libraryTarget: 'umd',
libraryExport: 'default',
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
},
jquery: {
root: '$',
commonjs2: 'jquery',
commonjs: 'jquery',
amd: 'jquery',
},
},
plugins: [
new CleanWebpackPlugin(['../Resources/public/js/modules']),
new UglifyJSPlugin({
sourceMap: true,
uglifyOptions: { ecma: 6 },
}),
],
};
我的package.json
:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"flatpickr": "^4.2.3",
"jquery": "^3.3.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-flatpickr": "^3.6.3"
},
"scripts": {
"watch": "npm-watch"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.12",
"clean-webpack-plugin": "^0.1.17",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0",
"html-to-react": "^1.3.2",
"npm-watch": "^0.3.0",
"prettier": "^1.12.1",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "3.10.0"
},
"watch": {
"build": "src/**/*.js"
}
}
我不知道这个问题的根源是什么。欢迎任何建议。