1 目录结构

安装依赖

cnpm install --save-dev babel-loader babel-core babel-preset-env babel-preset-latest

"babel-core": "^6.24.0", "babel-loader": "^6.4.1", "babel-preset-env": "^1.3.2", "babel-preset-latest": "^6.24.0",

2 webpack.config.js

const webpack = require('webpack'),
htmlWebpackPlugin = require('html-webpack-plugin'),
path = require('path'); module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-[chunkhash].js',
},
module: { //loader第三种使用方式 配置项设置 其他1引入 2cli
loaders: [
{
test: '/\.js$/', //正则匹配.js文件
loader: 'babel', //使用babel 要先安装 cnpm install --save-dev babel-loader babel-core
exclude: path.resolve(__dirname, 'node_modules'), //优化babel 排除
include: path.resolve(__dirname, 'src'),//优化babel 打包范围
query: {
presets: ['env'] //使用方式之1 cnpm install --save-dev babel-preset-env 告诉babel如何处理
//方式2 package.json中指定 方式3 cli运行时指定
}
}, ]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body'
})
]
};

3 app.js

import layer from './components/layer/layer.js'

const  App = function () {
console.log(layer);
} new App();

4 layer.js

//import tpl from 'layer.html';

function layer() {
return {
name: 'layer',
tpl: tpl
}
}; export default layer;

5 打包

6 验证是否成功

http://localhost:63342/web/webpack-demo/dist/index.html 运行

webpack2使用ch6-babel使用 处理es6 优化编译速度的更多相关文章

  1. Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度

    原文:Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度 嫌项目编译太慢?不一定是 Visual Studio 的问题,有可能 ...

  2. Android Studio优化编译速度

    随着Android Studio的不断完善,其安卓开发者阵营也基本从Eclipse转移到了Android Studio,毕竟Android Studio是谷歌亲力亲为开发的官方开发软件.不过其最重要的 ...

  3. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  4. 关于webpack,babel,以及es6和commonJS之间的联系(转)

    add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...

  5. Webpack 打包优化之速度篇

    在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...

  6. 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...

  7. dWebpack编译速度优化实战

    当你的应用的规模还很小时,你可能不会在乎Webpack的编译速度,无论使用3.X还是4.X版本,它都足够快,或者说至少没让你等得不耐烦.但随着业务的增多,嗖嗖嗖一下项目就有上百个组件了,也是件很简单的 ...

  8. Android Sutido 编译速度优化

    虽然Android Studio 此时已经更新到了Android Studio 2.1版本,build 版本android-studio-bundle-143.2739321.但是在安装该版本都是根据 ...

  9. CentOS6.5 Nginx优化编译配置[续]

    继续上文CentOS6.5 Nginx优化编译配置本文记录有关Nginx系统环境的一些细节设置,有关Nginx性能调整除了配置文件吻合服务器硬件之前就是关闭不必要的服务.磁盘操作.文件描述符.内核调整 ...

随机推荐

  1. Webservice优缺点总结

    优点: 1 .采用xml支持跨平台远程调用. 2.基于http的soap协议,可跨越防火墙. (因为SOAP一般使用HTTP协议,而服务器的这个协议一般都是开放的,而且是可以穿过防火墙的) 3.支持面 ...

  2. makefile初步制作,arm-linux- (gcc/ld/objcopy/objdump)详解

    在linux中输入vi Makefile 来实现创建Makefile文件 注意:命令行前必须加TAB键 例如:将两个文件led.c和crt0.S汇编文件,制作一个Makefile文件 led.bin ...

  3. python 斐波那契数列 fibonacci

    在python中生成fibonacci数列的函数 def fibonacci(): list = [] while 1: if(len(list) < 2): list.append(1) el ...

  4. Android学习记录:ViewPager实现欢迎页

    许多APP在第一次启动的时候,都会有welcome page.近日尝试利用ViewPager来实现Welcome Page. d0711 完成记录,跟新下载地址 =================== ...

  5. webarchive文件转换成htm文…

    原文地址:webarchive文件转换成htm文件作者:xhbaxf Mac OS X系统带有文件转换功能,可以把webarchive文件变成html文件.方法是:   Step 1: 建立一个文件夹 ...

  6. SwaggerUI笔记

    关于 Swagger Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. S ...

  7. 转:【Java集合源码剖析】Hashtable源码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/36191279 Hashtable简介 Hashtable同样是基于哈希表实现的,同样每个元 ...

  8. Java课程设计——博客作业教学数据分析系统(201521123091 李嘉廉)

    #课程设计--博客作业教学数据分析系统(201521123084 李嘉廉) 1.团队课程设计博客链接 博客作业教学数据分析系统 2.个人负责模块或任务说明 數據分析 Kmeans聚類算法實現 多元綫性 ...

  9. GUI(GroupLayout 分组布局)

    组:一些组件的集合                       连续组:一个接着一个摆放                       并行组:一个组在另一个组的顶部                   ...

  10. 结对编程1——四则运算-GUI

    码市链接:https://coding.net/u/hmhhh/p/hmh-homework/git/tree/master/ 201421123003 黄建英 201421123004 黄美海 题目 ...