JS的常用配置

ES6的语法兼容

ES6的语法兼容，低版本浏览器是不识别的，比如IE8以下，如果使用webpack进行打包js文件，是不会进行翻译的，使用babel会翻译ES6的语法

我们在index.js文件中使用es6语法写一个函数

const fun = (a, b) => a + b;
console.log(fun(1,2))

此时我们进行webpack，用浏览器打开，正常可以弹出

 

 

  但是在低版本使用就会报错

 此时我们需要三个依赖来进行ES6语法的翻译

babel-loader，babel-core，babel-preset-env

babel-core和babel-preset-env的作用是辅助babel-loader进行翻译的，babel-core指的是编译和翻译语言核心部分，babel-preset-env表示翻译ES6的新语法

npm install babel-loader@7 babel-core babel-preset-env -D

const {resolve}=require("path")
module.exports={
    //入口文件
    entry:"./src/index.js",
    //出口文件
    output:{
        //输出文件名
        filename:"build.js",
        //输出路径
        //__dirname表示当前文件夹的绝对路径
        path:resolve(__dirname,"build")
    },
    //配置相关的loader
    module:{
        //配置规则，内部是json配置项，每一个json就代表一个loader
        rules:[ 
            {
                // 识别.js结尾的文件
                test: /\.js$/,
                // 不需要识别/翻译node_modules文件夹内部的内容
                exclude: /node_modules/,
                // 使用的loader
                use: [
                  {
                    loader: 'babel-loader',
                    // 指导babel-loader进行翻译的配置工具
                    options: {
                      presets: ['env'] // env 指的是ECMAScript New Version（ES的新版本）
                    }
                  }
                ]
              }
        ]
    },
    plugins: [
        // 配置html的文件
        new HtmlWebpackPlugin({
          // template表示是引入的模板文件地址
          template: './src/index.html'
        }),
      
      ],    
    //打包模式development表示开发，production表示生产
    mode:"development"
}

此时在进行webpack打包，在低版本的浏览器就不会报错