版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dz45693/article/details/82872000
一、 啥问题
在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误
最初以为是babel-core没有安装上。重装了好几遍babel-core还是不行。对照以前的项目,发现babel-loader的版本不一样,之前的是@7.1.5版本,而现在是@8.0.0版本。
二、 解决方法
带着半信半疑的心情安装回@7.1.5版本
npm uninstall babel-loader
npm install babel-loader@7.1.5
再npm run build
发现成功了!
有点纳闷,距离上次安装不过才几天,就更新成[email protected]。而且还不支持原来的配置了。网上没有找到方法解决,原理也还不清楚。先mark一下,以后解决了@8.0.0的这个问题再回来补充。
附上webpack.config.js代码:
var path=require('path');
var webpack=require('webpack');
var HtmlwebpackPlugin=require('html-webpack-plugin');
var ROOT_PATH=path.resolve(__dirname);
var APP_PATH=path.resolve(ROOT_PATH,'app');
var BUILD_PATH=path.resolve(ROOT_PATH,'build');
module.exports= {
entry:{
app: path.resolve(APP_PATH,'app.jsx')
},
output:{
path:BUILD_PATH,
filename:'bundle.js'
},
devtool:'eval-source-map',
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
resolve:{
extensions:['.js','.jsx'],
modules: [APP_PATH, 'node_modules'],
},
module:{
rules:[
{
test:/\.jsx?$/,
loaders:['babel-loader'],
include:APP_PATH,
}
]
},
plugins:[
new HtmlwebpackPlugin({
title:'my first react app'
})
]
};
在写配置的时候 还遇到过
一下错误:
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`).
- configuration.resolve.extensions[0] should not be empty.
-> A non-empty string
错误原因:
首先 现在的module 下面应该是rules 节点,没有loaders节点,
2.extensions: ['', '.js', '.jsx'],里面不能包含空的元素,
3.root属性不存在,应该替换为modules: [APP_PATH, 'node_modules'],
后面还遇到过 'use strict' is unnecessary inside of modules。的错误
原因是ESLint把源代码当成了ES6的module,是不需要加use strict
的,但是在Node.js中需要的,否则会提示:
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
怎么办呢?当然是直接毙掉这个rule,参考.eslintrc.js
:
module.exports = {
extends: "airbnb-base",
env: {
node: true,
es6: true,
},
rules: {
'strict': 0,
},
};