webpack之loader简单使用

1.在app.js中写react语法

import  React    from  'React';
import  ReactDOM from  'react-dom';
ReactDOM.render(
    <div>React</div>,
    document.getElementById('cdd')
);

2.安装babel-loader及label-loader的核心依赖babel-core

cnpm i -D babel-loader babel-core

3.安装解析react代码的babel文件

cnpm i -D babel-preset-react

4.配置webpack.config.js的babel属性

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={//node.js语法导出一个对象
    entry:'./src/app.js',
    output:{
        path:path.resolve(__dirname,'dist'),//绝对路径
        filename:'main.js',
    },
    plugins:[
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'src/index.html'
        })
    ],
    module:{
        rules:[{
            test:/\.js$/,
            use:[{
                loader:'babel-loader',
                options:{
                    presets:['react']
                }
            }]
        }]
    }
}