脚本宝典收集整理的这篇文章主要介绍了webpack--增加babel支持(十二),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录结构
文件内容
src/entry.js
{
let name = "jie";
document.getElementById('title').innerHTML = name;
}
webpack.config.js
安装依赖
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
module
rules:[
{
test:/.(js|jsx)$/,
use:{
loader:'babel-loader',
options:{
presets:[
'es2015',
'react'
]
}
},
//过滤掉,不编译node_modules中的文件,
exclude:/node_modules/
}
]
打包,运行
npm run build
npm run server
打包后的dist/entry.js
.babelrc配置
.babelrc文件
{
"presets":["react","es2015"]
}
webpack.config.js
{
test:/.(js|jsx)$/,
use:{
loader:'babel-loader',
},
//过滤掉,不编译node_modules中的文件,
exclude:/node_modules/
}
打包运行后一样的效果
env(es2015,es2016,es2017)
安装依赖
cnpm install --save-dev babel-preset-env
修改.babelrc
{
"presets":["react","env"]
}
打包运行后一样的效果
报错
解决办法
- 把package.json中的
babel-loader
修改为"babel-loader": "^7.0.4",
- 删除
node_modules
,然后cnpm install
以上是脚本宝典为你收集整理的webpack--增加babel支持(十二)全部内容,希望文章能够帮你解决webpack--增加babel支持(十二)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。