webpack 配置es6语法转义es5语法方法

本文详细介绍如何使用前端自动化工具Webpack进行项目打包,并通过Babel转换ES6语法至ES5,包括依赖安装、配置文件详解及执行命令说明。

  前端自动化生产工具:webpack

 

   webpakc安装

npm add --dev babel-loader babel-core babel-preset-env webpack
npm install webpack --save
依赖包
babel-loader babel-core babel-preset-env
安装方法 npm install 包名
如果安装不成功可能是本地访问国外网络较慢 建议使用淘宝镜像资源来安装

淘宝镜像资源使用方法:
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install [name]
安装好以上依赖后然后配置 webpack.config.js:

  

  


var path = require('path');
 module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
};

  

  



以上配置好后可以使用以下命令来执行es6转es5语法

   webpack    //对项目进行打包

   webpack   --watch   // 自动监控文件的改变
 
 

转载于:https://www.cnblogs.com/bohew/p/7722310.html

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值