一、前言

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. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 5 Octave Tutorial—5.4 绘制数据图

    5.4 绘制数据图 参考视频: 5 - 4 - Plotting Data (10 min) 5.4.1 绘制曲线 1.画一个sin曲线 >> t = [:0.01:0.98]; > ...

  2. shelve和hashlib模块

    一.shelve模块 shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式. 注意: shelve模块封装了pickle模块,,允许 ...

  3. C程序栈内存堆内存的地址

    #include <stdio.h> #include <malloc.h> int main() { char * p1, * p2; p1=(char *)malloc(2 ...

  4. xcode恢复语法高亮

    [xcode恢复语法高亮] 非常简单,在Organizer中删除derivedData.

  5. Eclipse下使用Subversion（SVN工具）

    本文目的 让未使用过版本控制器软件或者未使用过subversion软件的人员尽快上手. subversion的使用技巧很多,这里只总结了最小使用集,即主要的基本功能,能够用来应付日常工作. 因此不涉及 ...

  6. PHP json_encode 让URL//不转义

    $json_info=json_encode((object)$data,JSON_UNESCAPED_SLASHES);

  7. Mask_RCNN openpose AlphaPose Kinect姿态识别

    1.Mask_RCNN ---------------------------------------------------------------------------------------- ...

  8. OpenNebula 深入分析

    -------------------OpenNebula 深入分析------------------- #容量清单 属性 描述 NAME 如果名字是空的,那么默认名字是:one-<VID&g ...

  9. getopt两个模块getopt 和gun_getopt 的异同

    getopt的两个模块getopt和gun_getopt都可以接收参数,但是又有不同; 先看 getopt.getopt这个模块: import sys import getopt def main( ...

  10. zigbee--绑定

    1.绑定是zigbee一种基本通信方式:具体绑定通信又分为3种模式,在这里只拿一种源绑定来说明. 源绑定: 发送模块 :必须要知道接收模块(被绑定模块)的网络地址或者MAC地址 接收方的接收端点 接收 ...