下载
这里我是用npm命令下载的,我就不多叙述 了。
下载完package.json如下
可能会跟一些博客上的不同,主要就是因为babel7舍弃了以前的 babel-- 的命名方式,改成了@babel/-
webpack.config.js具体代码如下
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
//创建插件实例对象
const htmlplugin = new HtmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
module.exports = {
mode : "development",
plugins:[
htmlplugin
],
module: {
rules: [
{
test: /\.js|jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-react']
}
}
},
]
}
}
presets: [’@babel/preset-react’]这里不要写错了,babel7之前是react,之后就是@babel/preset-react,写错了,会报错,
ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react' from '/Users/me/Desktop/reflask' - If you want to resolve "react", use "module:react"
参考的文章,babel7转换jsx
babelrc文件
{
"presets": ["@babel/preset-env", "mobx"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}
当我运行的时候,页面显示正常的内容了,但是,控制台已就报错 了。
Uncaught Error: Target container is not a DOM element.
此时,只需要将你引用的script放在body之后,即可
这时,程序就可以正常运行,且前端不报错了。
这篇文章仅仅就是我给自己提个醒,很多地方并未做解释,不喜勿喷,如果有错的地方,希望各位大牛可以指出。