配置webpack— js处理

配置webpack — js处理

一、转化es6语法

1. 安装babel

yarn add babel-loader @babel/core @babel/preset-env -D

2. 配置webpack.config.js文件：

    module:{ // 模块
        rules:[ 
            {
                test:/\.js$/,
                use:{ 
                    loader: 'babel-loader',
                    options:{  //用babel-loader需要把es6->es5
                        presets:[
                            '@babel/preset-env'
                        ],
                        plugins:[  
                            	// 比如es6的高级语法不识别的,需要安装一些小插件,这里已class为例
                            	// 安装命令：yarn add @babel/plugin-proposal-class-properties -D
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                },
                exclude:/node_module/    
            }
       ]
    }

3. 在文件中写入es6语法：

let fn = ()=>{
    console.log("es6语法呀")
}
fn();

4. npm run dev 运行项目，控制台打印出“es6语法呀”