2020-11-26使用 Babel 处理 ES6 语法（2.1

使用 Babel 处理 ES6 语法（1）
  //--img插入

   //npx webpack打包
   //查看dist目录下的main.js最后一行

   //npm run start启动服务器
   //chrom能正常运行es6语法

   //IE浏览器/火狐浏览器不支持es6语法

   //如果再src目录下写es6语法，通过webpack打包npx webpack
   //如果打包生成的文件把es6的语法转换成es5的语法，
   //也就是生成的dist目录下的index.js

   1.借助babel
     //http://babeljs.io
     //webpack打包过程如何让使用babel
     npm install --save-dev babel-loader @babel/core


   //webpack.config.js中添加规则
    {
      test: /\.m?js$/, //如果检测到是js文件，使用babel-loader来进行语义上的分析
      exclude: /node_modules/, //如果js文件在node_modules里面，就不使用babel-loader
      loader: "babel-loader",
      options:{
      "presets": ["@babel/preset-env"]
     }
    },

   //exclude排除在外 
   //node_modules的代码是一些第三方的代码
   //第三方代码已经做好了这一步
   //只有你的文件在src文件下才会生效


   2.npm install @babel/preset-env --save-dev

     当我们使用babel-loader处理js文件的时候
     实际上babel-loader只是webpack和babel做通信的桥梁，
     用了之后webpack和babel做了打通
     实际上babel-loader并不会帮你把js里面的es6语法翻译成es5语法
     你还需要借助其他模块
     babel/preset-env这个模块包含所有es6转换成es5的一些翻译规则
     安装使用它之后，就可以在打包的过程中把我们所有的js代码翻译成es5的语法了

   //配置presets
   //这样做打包的时候es6语法就会被翻译成es5了

   3. npm install --save @babel/polyfill

      像数组map方法在低版本浏览器还是没有的，
      所以不仅要使用babel/preset-env做语法的转化
      还要把缺失的语法补充到低版本里
      怎么补充？
      在所有代码运行之之前先去引入import "@babel/polyfill"来补充我们缺少的内容就可以了
      放到src目录下的index.js的嘴上边

   //安装babel/polyfill后，打包的main.js变大了
   //多的内容是babel/polyfill要去弥补低版本浏览器不存在的一些内容
   //它要自己去帮你做promise的实现
   //帮你去做map方法的实现等等
   //然后把这些实现再加到main.js里面

   //只需要把用的语法打包到main.js
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        // options: {
        //   presets: ['@babel/preset-env']
        // }
        options: {
          presets: [['@babel/preset-env',{ //babel/preset-env增加一个新参数
            useBuiltIns:'usage'
          }]]
        }
      }
    },


   //放到一个[]里面，
   //[]第一个参数指的是你要用的preset名字
   //[]第二个参数放置的是它的一些配置参数
   //useBuiltIns:'usage'当我去做babel/polyfill填充的时候，
   //去往页面上加一些低版本浏览器可能不存在的特性的时候
   //我不是把所有的特性都加进来
   //我是根据你的业务代码来决定到底加什么的

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode:'development', //开发者模式，默认SourceMap已经被配置进去了
  devtool:'cheap-module-eval-source-map', //SourceMap关掉
  entry:{
    main:'./src/index.js',
  },
  devServe:{
    contentBase:'./dist', //服务器起到哪个文件夹下
    open:true, 
    port:8080, 
    hot:true, //
    hotOnly:true
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          // options: {
          //   presets: ['@babel/preset-env']
          // }
          options: {
             presets: [['@babel/preset-env',{
               useBuiltIns:'usage'
             }]]
          }
        }
      },
      {
        test: /\.(jpg|png|gif)$/,
        use:{
          loader:'url-loader',
          options:{
            name:'[name]_[hash].[ext]', 
            outputPath:'images/',
            limit:2048                  
          }
        }
      },
      {
        test: /\.(eot|ttf|svg)$/,
        use:{
          loader: 'file-loader',
        } 
      },
      {
        test: /\.scss$/,
        use:[
          'style-loader',
          {
            loader:'css-loader',
            options:{
              importLoaders:2
            }
          },
          
          'scss-loader',
          'postcss-loader'
          ] 
      },
      {
        test: /\.scss$/,
        use:[
          'style-loader',
          'css-loader',
          'postcss-loader'
          ] 
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'src/index.html'
    }),
    new HtmlWebpackPlugin(['dist'])],
    new webpack.HotModuleReplacementPlugin(), //添加新的插件
  output:{
        filename:'bundle.js',
        path:path.resolve(_dirname,'dist')
  }