一、前言

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. ActiveX每次网页打开提示活动内容运行

    (2)       设置允许活动内容运行. 在启动调试,网页经常会呈现如下提示框,每次都要确认,很麻烦. 以下方法可以消除这个提示框. 在IE中打开Internet 选项对话框,选择高级选项卡,勾选里 ...

  2. linux 修改openfiles

    使用ulimit -a 可以查看当前系统的所有限制值,使用ulimit -n 可以查看当前的最大打开文件数. 新装的linux默认只有1024,当作负载较大的服务器时,很容易遇到error: too ...

  3. 【转】教你如何实现linux和W…

    原文地址:[转]教你如何实现linux和Windows之间的文件共享,samba的安装与配置作者:铅笔小蜡 本人在虚拟机下装fedora13,已经实现. 1. 首先检查os是否安装好了samba. [ ...

  4. 对get post请求的封装

    HttpUtil.java package com.dhc.task.wx.util; import java.io.BufferedReader; import java.io.IOExceptio ...

  5. Laravel 5.3 auth中间件底层实现详解(转)

    1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...

  6. 简单tarjan》一道裸题（BZOJ1051）（easy）

    这是一道水题,实际考察的是你会不会写强连通分量...(在BZOJ上又水了一道题) Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B ...

  7. JS事件冒泡和事件捕获的详解

    在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...

  8. 【总结整理】Edraw Max亿图图示软件快捷键（转）

    Edraw Max亿图图示软件快捷键大全,你想要的都在这了!   用过Edraw Max亿图图示软件的一定知道,亿图是一款功能十分强大的图形图表设计软件.无论是流程图.思维导图.组织结构图.甘特图.网 ...

  9. vmware workstation + kvm 部署

    1.物理机BIOS设置里开启虚拟化功能 2.vm里面开启一下两个功能 3.找到存放该虚拟机的dir,找到以.vmx结尾的文件,增加一行 apic.xapic.enabled = "FALSE ...

  10. Hyperledger Fabric开发

    打开Hyperledger Fabric在线开发文档:https://hyperledger-fabric.readthedocs.io 建议在Mac或Linux环境下操作,因为文档基本上是按照Mac ...