一、前言

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. Vulkan Tutorial 04 理解Validation layers

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 What are validation layers? Vulkan API的设计核 ...

  2. 有一些sql 是必须要做笔记的！！

    select CONCAT(unix_timestamp(),"-",id,"-",name) as aa,age from workers; //连接字段 s ...

  3. Centos手动编译安装vim8

    系统:CentOs6.9 gcc版本:5.1.0 github上拉取vim工程之后,cd src,执行一下命令: $ ./configure $ sudo make gcc -c -I. -Iprot ...

  4. Spring总结十：事务案例

    数据库表Account: 导包: <dependencies> <!--测试--> <dependency> <groupId>junit</gr ...

  5. SaeMail使用示例

    SAE的官方文档:http://apidoc.sinaapp.com/sae/SaeMail.html SaeMail类的具体实现:http://apidoc.sinaapp.com/__fileso ...

  6. Docker学习笔记_Dockerfile常用指令

    Dockerfile常用指令

  7. linux Shell中常用的条件判断

    linux Shell中常用的条件判断 -b file            若文件存在且是一个块特殊文件,则为真 -c file            若文件存在且是一个字符特殊文件,则为真 -d ...

  8. 关于box-sizing属性

    写在前面 文中错误或不足之处欢迎指正批评,共同交流! 在项目中写css组件时遇到一个问题: 要求两个按钮均分其父元素宽度,且父元素宽度不固定,像这样: 第一反应很自然的想到使用flex布局,但是由于需 ...

  9. 29.MAX() 函数

    MAX() 函数 MAX 函数返回一列中的最大值.NULL 值不包括在计算中. SQL MAX() 语法 SELECT MAX(column_name) FROM table_name 注释:MIN ...

  10. Luogu 3665 [USACO17OPEN]Switch Grass 切换牧草

    BZOJ 4777 被权限了. 这道题的做法看上去不难,但是感觉自己yy不出来. 首先是两个结论: 1.答案一定是连接着两个异色点的一条边. 2.答案一定在最小生成树上. 感觉看到了之后都比较显然,自 ...