一、概述

ES6现在正是风华正茂的时候,各个公司都是 尝试去使用,并且作为前端工程师ES6也是体现技术的亮点。但是,现在的浏览器对es6支持不是 特别的兼容,最终还是需要把es6转换为es5,webpack使用babel-loader加载器进行转换,它的配置 也是非常的容易。

二、配置babel-loader

如果现在你的项目还没有对ES6的语法支持,那就有点没有逼格了,其实大家都知道这个也很简单,因为我们有伟大的Babel

首先 装各种loader

npm install babel-loader babel-preset-es2015 transform-loader --save-dev

然后配置加载器

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../');
// 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
        //项目的文件夹 可以直接用文件夹名称 默认会找index.js ,也可以确定是哪个文件名字    
        entry: {
            app: ['./src/js/index.js'],
            vendors: ['jquery', 'moment'], //需要打包的第三方插件
            login: ['./src/css/login.less']
        },
        //输出的文件名,合并以后的js会命名为bundle.js    
        output: {
            path: path.join(__dirname, "dist/"),
            publicPath: "http://localhost:8088/dist/",
            filename: "bundle_[name].js"
        },
        module: {
            loaders: [
                // 把之前的style&css&less loader改为            
                {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader'),
                    exclude: /node_modules/                 }, {
                    test: /\.less$/,
                    exclude: /node_modules/,
                    loader: ExtractTextPlugin.extract('style', 'css!autoprefixer?{browsers: ["last 2 version", "IE 8", "Android 4.0", "iOS 6"]}!less?strictMath&noIeCompat!postcss')
                },
                { test: /\.(png|jpg|gif|svg)$/, exclude: /node_modules/, loader: 'url?limit=8092' }, 
          {test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}
                }]}

es2015这个参数是babel的plugin,可以支持各种最新的es6的特性。现在我们可以改掉CommonJS风格的文件了。

sub.js

export default function() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world hahaha";
  return element;}

index.js

var login=require('./login');
var data = require('data');
require('./../css/index.css');
require('./../css/login.less');
import generateText from './sub';
$("#welcome").html(generateText());

执行

webpack-dev-server --hot --inline

Webpack结合ES6的更多相关文章

  1. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  2. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  3. webpack + react + es6, 并附上自己碰到的一些问题

    最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...

  4. Webpack+React+ES6入门指南[转]

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  5. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  6. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  7. Webpack+React+ES6 最新环境搭建和配置(2017年)

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  8. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  9. webpack学习(六)—webpack+react+es6(第3篇)

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  10. webpack学习(六)—webpack+react+es6(第2篇)

    接上篇        webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...

随机推荐

  1. golang调试工具Delve

    Devle是一个非常棒的golang 调试工具,支持多种调试方式,直接运行调试,或者attach到一个正在运行中的golang程序,进行调试. 线上golang服务出现问题时,Devle是必不少的在线 ...

  2. U-boot-1.1.4中关于hello_world.srec出错

    make[1]: *** No rule to make target `hello_world.srec', needed by `all'.  Stop. make[1]: Leaving dir ...

  3. 3.1 PCI设备BAR空间的初始化

    在PCI Agent设备进行数据传送之前,系统软件需要初始化PCI Agent设备的BAR0~5寄存器和PCI桥的Base.Limit寄存器.系统软件使用DFS算法对PCI总线进行遍历时,完成这些寄存 ...

  4. 利用ffmpeg做视频解码的顺序

    这几天在实验室捣鼓着用ffmpeg做视频解码,终于把数据解出来了,虽然还没有做显示部分,不知道解码解得对不对,但料想是不会有什么问题了.回头看看这几天的工作,其间也遇到了不少问题,主要还是对ffmpe ...

  5. FusionCharts封装-Value

    Data.java: /** * @Title:Data.java * @Package:com.fusionchart.model * @Description:FusionCharts 封装dat ...

  6. JAVA中线程同步方法

    JAVA中线程同步方法 1  wait方法:         该方法属于Object的方法,wait方法的作用是使得当前调用wait方法所在部分(代码块)的线程停止执行,并释放当前获得的调用wait所 ...

  7. Caused by: java.lang.ClassNotFoundException: javax.persistence.NamedStoredProcedureQuery

    1.错误描述 2014-7-12 21:06:37 org.hibernate.engine.jdbc.internal.LobCreatorBuilder useContextualLobCreat ...

  8. freemarker中的round、floor和ceiling数字的舍入处理(十七)

    1.简易说明 (1)round:四舍五入 (2)floor:向下取整 (3)ceiling:向上取整 2.举例说明 <#--freemarker中的round.floor和ceiling数字的舍 ...

  9. java将字符串转换为指定的时间格式

    *String dateString = "18:31:43";    try {     Date date = new SimpleDateFormat("HH:mm ...

  10. 利用SSH端口转发实现跨机器直接访问

    在实际项目测试中经常会遇到数据库操作,但是因为公司安全问题,访问数据库往往需要通过跳板机.但通过跳板机,测试效率大打折扣,因此通过使用SSH端口转发,从而达到跨机器直接访问数据库.实际项目中的应用会比 ...