webpack2使用ch6-babel使用 处理es6 优化编译速度

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 运行

时间: 2024-10-10 06:55:56

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

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

原文:Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度 嫌项目编译太慢?不一定是 Visual Studio 的问题,有可能是你项目的引用关系决定这个编译时间真的省不下来. 可是,编译瓶颈在哪里呢?本文介绍 Parallel Builds Monitor 插件,帮助你迅速找出编译瓶颈. 本文内容 下载安装 Parallel Builds Monitor 编译项目 寻找瓶颈 项目依赖瓶颈 CPU 瓶颈 IO 瓶颈 下载安装

Babel下的ES6兼容性与规范

ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有哪些兼容性问题. 一.兼容性问题现状 针对ES6的新特性兼容性问题,目前解决的方案是使用语法解析转换工具将es6语法转化为大部分浏览器识别的es5语法,通用的转化方案有babel,traceur,jsx,typescript,es6-shim.当然es6在服务器端也存在兼容性问题,这里由于只考虑到浏览器端的开发,

Webpack编译速度优化实战

当你的应用的规模还很小时,你可能不会在乎Webpack的编译速度,无论使用3.X还是4.X版本,它都足够快,或者说至少没让你等得不耐烦.但随着业务的增多,嗖嗖嗖一下项目就有上百个组件了,也是件很简单的事情.这时候当你再独立编前端模块的生产包时,或者CI工具中编整个项目的包时,如果Webpackp配置没经过优化,那编译速度都会慢得一塌糊涂.编译耗时10多秒钟的和编译耗时一两分钟的体验是迥然不同的.出于开发时的心情的考虑,加上不能让我们前端的代码编译拖累整个CI的速度这两个出发点,迫使我们必须去加快

CentOS6.5 Nginx优化编译配置

说到Nginx,它真的算是我在运维工作中的好朋友,它优异的性能和极高的工作效率实在是让人大爱,来自internet的报告称其epoll模型能够支持高达50000个并发连接数. Epoll[维基百科]: epoll是Linux下 多路复用IO接口select/poll的增强版本,它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率,因为它会复用文件描述符 集合来传递结果而不用迫使开发者每次等待事件之前都必须重新准备要被侦听的文件描述符集合,另一点原因就是获取事件的时候,它无须遍历

优化网页速度的7种方法

为什么网站优化要把网页静态化? SEO优化过程中,把动态网页转化为静态页面是许多SEO优化人员常常做的事情,面对这种SEO优化操作的行为很多人可能有疑问,那就是为什么网站优化要把网页静态化?下面就给大家详细的介绍一下关于网页静态化的一些问题. 什么是动态页面?什么是静态页面? 动态网页:是以.asp..jsp..php..perl..cgi等形式为后缀,并且在动态网页网址中有一个标志性的符号——“?”.动态页面是以ASP.PHP.JSP.Perl.或CGI等编程语言制作的,用上面两个指标基本上可

Sql server2005 优化查询速度50个方法小结

Sql server2005 优化查询速度50个方法小结 Sql server2005优化查询速度51法查询速度慢的原因很多,常见如下几种,大家可以参考下. I/O吞吐量小,形成了瓶颈效应.  没有创建计算列导致查询不优化.  内存不足.  网络速度慢.  查询出的数据量过大(可以采用多次查询,其他的方法降低数据量).  锁或者死锁(这也是查询慢最常见的问题,是程序设计的缺陷).  sp_lock,sp_who,活动的用户查看,原因是读写竞争资源.  返回了不必要的行和列.  查询语句不好,没有

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

继续上文CentOS6.5 Nginx优化编译配置本文记录有关Nginx系统环境的一些细节设置,有关Nginx性能调整除了配置文件吻合服务器硬件之前就是关闭不必要的服务.磁盘操作.文件描述符.内核调整等. 1.关闭系统中不需要的服务 ###Centos minimal 本来就是最小安装,这里我也就不提建议了,跟着自己的环境来###[[email protected]-it ~]# chkconfig --list auditd 0:off 1:off 2:on 3:on 4:on 5:on 6:

Android Sutido 编译速度优化

虽然Android Studio 此时已经更新到了Android Studio 2.1版本,build 版本android-studio-bundle-143.2739321.但是在安装该版本都是根据自己的标准进行安装,所以需要在安装之后进行一系列的调整.下面文章根据3个方面进行讲解.分别为Android Studio本身.Gradle.不调整出现的编译上的问题. Android Studio优化 编译优化需要有两个步骤,以下一一介绍. 步骤一:Gradle编译优化 在项目的根目录中进行修改.修

babel转码es6具体说明

之前一直vue脚手架直接就建立了webpack很多东西都是自主转码的,今天仔细查看了一下babel,发现了这个还是有很多需要研究的东西. 1.babel-node babel-cli工具自带的babel-node命令,提供一个支持es6的REPL环境.支持在node的REPL环境的所有功能.可以直接运行ES6代码 2.babel-register 改写require命令,可以直接require在加载.js .jsx .es .es6 后缀名的文件,会事先用Babel进行转码 3.babel-co