一、前言

ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。
Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

二、安装

1、创建个文件夹，目录如下：

2、安装webpack

额外说明一下：node.js 的包安装的时候都加上 --save-dev 参数，那么这个参数是干什么的呢？

当你为你的模块安装一个依赖模块时，正常情况下你得先安装他们（在模块根目录下npm install module-name），然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里（dependencies）。

-save和save-dev可以省掉你手动修改package.json文件的步骤。
npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分

3、 安装babel  实现 ES6 到 ES5

4、安装babel-loader

webpack.config.js配置

module.exports = {

    entry: './module/module1.js',

    output: {

        filename: './js/bundle.js'

    },

    module: {

        //webpack使用loader的方式处理各种各样的资源

        loaders: [{

            test: /\.js$/, //处理以.js结尾的文件

            exclude: /node_modules/, //处理除了nodde_modules里的js文件

            loader: 'babel-loader' //用babel-loader处理

        }]

    }

}

module2.js模块

export default {

    add: (a, b) => a * b

}

module1.js模块

import module from './module2'

console.log("计算结果为："+module.add(5, 5))

以上两个模块用了es6的语法

执行webpack命令打包

打包后目录：

编写index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

<script src="./js/bundle.js"></script> //引入打包文件

</html>

结果为：

webpack（二）解析es6并打包的更多相关文章

  1. webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)

    1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...

  2. webpack如何编译ES6打包

    前言:随着ES的普及我们越来越多的开始使用ES6的语法了,当然也随着mvvm框架的流行少不了js模块化,那js模块化又有那些呢 在很早的时候大家都用的命名空间,现在也有人用(库名.类别名.方法名) 后 ...

  3. webpack+react+redux+es6开发模式---续

    一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...

  4. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  5. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  6. 使用 webpack + react + redux + es6 开发组件化前端项目

    因为最近在工作中尝试了 webpack.react.redux.es6 技术栈,所以总结出了一套 boilerplate,以便下次做项目时可以快速开始,并进行持续优化.对应的项目地址:webpack- ...

  7. webpack4 系列教程(二): 编译 ES6

    今天介绍webpack怎么编译ES6的各种函数和语法.敲黑板:这是webpack4版本哦, 有一些不同于webpack3的地方. >>> 本节课源码 >>> 所有课 ...

  8. Webpack 入门(一)：安装 / 打包 / 命令行

    一:安装webpack和基本环境搭建 新建一个工作的文件夹(我取的名字叫Webpack) 打开命令行,cd进入该文件夹 //初始化一下npm > E:\work\Webpack>npm i ...

  9. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

随机推荐

  1. iTunes 安装ipa文件到iPhone上

    iTunes 安装ipa文件到iPhone上 把ipa文件拖到itunes里面. ipa(iPhoneApplication) 菜单 File>Add File to Library>Se ...

  2. 关于苹果safari浏览器登陆时Cookie无法保存的问题

    前段时间,修改了登录处理后给到客户端浏览器Cookie的内容,新增了一个姓名的value,发现safari不能保存该Cookie的内容,同时Chrome.firefox.ie等浏览器都能正常的访问,直 ...

  3. dyld_decache&MesaSQLite

    [dyld_decache] Starting from iPhone OS 3.1, the individual libraries files supplied by the system ar ...

  4. 【bzoj1050】[HAOI2006]旅行comf

    1050: [HAOI2006]旅行comf Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2813  Solved: 1534[Submit][St ...

  5. sql server 错误总结

    1>无法访问sql server2000数据库 1.1>安装sql server2000 sp1的补丁包. 1.2>sql server 数据库开启了允许远程访问. 1.3>s ...

  6. Use SFTP in Linux (转)

    From http://www.cnblogs.com/chen1987lei/archive/2010/11/26/1888391.html sftp 是一个交互式文件传输程式.它类似于 ftp, ...

  7. 数字图像处理实验（10）：PROJECT 05-01 [Multiple Uses]，Noise Generators 标签： 图像处理MATLAB 2017-05-26 23:36

    实验要求: Objective: To know how to generate noise images with different probability density functions ( ...

  8. hibernate使用记录

    1.执行SQL语句而非hql语句,getSession().createQuery(sql2) 执行的是hibernate语句; Query query2 = this.onlineMonitorDa ...

  9. Capturing ASP.NET Application Startup Exceptions

    It has become common practice to perform tasks during an ASP.NET applications start up process. Thes ...

  10. Which Uri Encoding method should i use in C#/.net?

    June 19, 2015 This too is one of the boring "factual" posts. Sorry Lachlan. I never know w ...