webpack-babel(4)

1，什么是bable

 

2， babel可以脱离webpack单独使用，但要借助@babel/cli

 3，webpack中配置babel：

webpack插件配置babel，需要用但一个插件安装一个插件，但是我们一般使用webpack5的预设环境进行配置

webpack5中使用预设环境配置babel：需要安装npm install -D babel-loader @babel/core @babel/preset-env。

未抽离babel.config.js前webpack.config.js中babel-loader的配置

      //配置jsbable
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            //使用过插件的形式配置箭头函数转换,将cost转var
            // plugins: [
            //   "@babel/plugin-transform-arrow-functions",
            //   "@babel/plugin-transform-block-scoping"
            // ]

            //使用webpack5的预设环境,配置箭头函数转换,将cost转var
            presets: ["@babel/preset-env"]
          }
        }
      }

4，抽取babel的配置文件：当babel再webpack中配置会导致webpack.config.js文件臃肿，可以类似于postcss，把babel的配置抽离出去，项目根目录新建babel.config.js文件，打包时会自动读取

webpack.config.js中babel的配置

      //配置jsbable
      {
        test: /\.js$/,
        use: ["babel-loader"]
      }

babel.config.js的配置

module.exports = {
  presets: ["@babel/preset-env"]
};

                        贴一下当前配置：       

// webpack.config.js使用commjs导入
//插件使用时要导入,插件一般为一个类,使用时要new一个对象

//每次打包时清理上次打包的文件夹
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//打包自动生成html文件
const HtmlWebPackPlugin = require("html-webpack-plugin");
//webpack自身的插件，用于获取全局上下文
const { DefinePlugin } = require("webpack");
//复制文件的插件
const CopyWebpackPlugin = require("copy-webpack-plugin");

const path = require("path");
module.exports = {
  //使用什么模式打包，开发模式不会压缩代码
  mode: "development",
  //设置开发时工具，默认eval,source-map生成源码映射文件
  devtool: "source-map",
  //entry是整个文件的入口，默认打包src下的index.js,这里可以改变
  entry: "./src/main.js",
  //打包后文件的出口
  output: {
    //文件出口的路径要填绝对路径，可以使用__dirname获取当前路径进行拼接
    path: path.resolve(__dirname, "./build"),
    //打包后文件的名字
    filename: "js/bundle.js"
  },
  //对模块进行的配置
  module: {
    //配置模块的规则
    rules: [
      //处理css和less文件的loader
      {
        //后跟正则表达式，匹配哪些文件需要使用这个规则
        test: /\.(less||css)$/,
        //使用什么loader去处理所匹配的文件,
        //把文件所知用的loader放在数组中，注意loader是有执行顺序的，数组的后面往前执行
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"]
      },
      //webpack5处理图片资源，相当于内置了bable
      {
        test: /\.(jpg|svg|png)$/i,
        //类型设置,asset相当于,file-loader和urlloader的集成
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          //图片转为base64的条件
          dataUrlCondition: {
            //最大分辨率100*1024
            maxSize: 100 * 1024
          }
        }
      },
      //webpack5处理处理字体
      {
        test: /\.(eot|ttf|woff2?)$/,
        //类型设置，resource相当于使用了file-loader
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]"
        }
      },
      //配置jsbable
      {
        test: /\.js$/,
        use: ["babel-loader"]

        // use: {
        // loader: "babel-loader"
        // options: {
        //使用过插件的形式配置箭头函数转换,将cost转var
        // plugins: [
        //   "@babel/plugin-transform-arrow-functions",
        //   "@babel/plugin-transform-block-scoping"
        // ]

        //使用webpack5的预设环境,配置箭头函数转换,将cost转var
        // presets: ["@babel/preset-env"]
        // }
        // }
      }
    ]
  },
  //plugins是存放一个个插件对象的数组
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebPackPlugin({
      //不配置模板会用默认的模板，配置了模板会按自己的模板来
      template: "./public/index.html",
      title: "模板" //给html模板添加title
    }),
    new DefinePlugin({
      //如果给BASE_URL一个变量名,他就会去全局找这个变量,并替换
      BASE_URL: "'./'"
    }),
    new CopyWebpackPlugin({
      //匹配要复制的文件夹的规则
      patterns: [
        {
          from: "public", //从哪里复制
          to: "./", //粘贴到出口文件
          globOptions: {
            //忽略规则,相当于忽略html把icon移动到打包后的文件
            ignore: ["**/index.html"]
          }
        }
      ]
    })
  ]
};

 babelconfig.js

module.exports = {
  presets: ["@babel/preset-env"]
};