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"]
}

打包运行后一样的效果

报错

解决办法

1. 把package.json中的babel-loader修改为"babel-loader": "^7.0.4",
2. 删除node_modules,然后cnpm install