webpack搭建ES6环境

原创 2017年06月07日 22:34:52

ES6环境搭建

参考链接

环境需求:
1. Node
2. cnpm (国内可以选择cnpm,淘宝镜像)
3. webpack
4. babel-loader (转码器)

创建工程目录的结构如下:
目录结构

目录结构说明:
study-es6: 项目名
dist/js:存放打包后的文件;
src:开发环境访问的目录;
src/main.js:我们编写的es6代码;
index.html:访问的页面(根目录下)
webpack.config.js:webpack配置文件;

 1. cnpm install 
 2. cnpm install webpack --save-dev ( 安装webpack )
 3. cnpm install babel-loader babel-core babel-preset-es2015 webpack --save-dev  ( 安装转码器 )  

官方 babel-loader 说明

配置文件

webpack.config.js配置:

// webpack2 需要引入path 使用绝对路径
const path = require('path')

module.exports = {

//  入口文件 
    entry: './src/main.js',

//  输出文件
    output: {

        //  输出的文件名字
        filename: 'bulid.js',

        // 输出的文件地址  path对应一个绝对路径,此路径是你希望一次性打包的目录。
        path: __dirname+'/src/dist/'
    },

    //模块
    module:{

    // 加载器
        rules:[
            {
                test:/\.js$/, //匹配.js文件
                //排除也就是不转换node_modules下面的.js文件
                exclude: /(node_modules|bower_components)/,
        //加载器  webpack2需要loader写完整 不能写babel 要写 bable-loader
                use:[{loader:"babel-loader"}]
            }
        ]
    }
}

未加注释:

const path = require('path')

module.exports = {
    entry: './es6-01/src/main.js',
    output: {
        filename: 'bulid.js',
        path: __dirname+'/es6-01/dist/'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude: /(node_modules|bower_components)/,
                use:[{loader:"babel-loader"}]
            }
        ]
    }
}

package.json文件配置:
package.json

这是主要就是命令;使用起来方便:
dev代表你可以在命令行输入:
cnpm run dev
(后面的–colors是彩色打印,,请问一下其他的选项参数官网怎么找,我找了半天。。。)

你的babel-laoder也要写入package.json文件中:
babel-loader

然后就运行吧

版权声明:喜欢就拿去。来自:一个有梦想的咸鸭蛋

使用webpack快速搭建最简单ES6环境

使用webpack快速搭建最简单ES6环境 目录如下: myProject---|    |node_modules    |prd---|      |build.js...

React+Webpack+ES6从环境搭建到HelloWorld

转载请注明预见才能遇见的博客:http://my.csdn.net/ React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端框架。Webpa...
  • pcaxb
  • pcaxb
  • 2016年08月15日 16:30
  • 12488

【webpack】使用webpack进行ES6开发

本文主要介绍webpack的基本原理以及基于webpack搭建前端项目工程化解决方案的思路。 目录: 1、为什么要用webpack 2、webpack的安装 3、webpack的配置 4、ithub...

webpack的安装与环境配置

有时候何必纠结于一个问题不放呢,回去睡一觉第二天可能会有更好的解决办法 *--web...

webpack - 如何把es6编译成es5

目录: 配置: 需要说明的地方: 如果不用es2016,es2017,是不需要babel-preset-es2016,babel-preset-es20...

Webpack无法编译ES6文件的原因分析

在项目中使用了Webpack与ES6技术,但经常出现ES6文件没有编译的错误,如下:main.js:62 Uncaught SyntaxError: Unexpected token export浏览...
  • yiifaa
  • yiifaa
  • 2016年12月16日 12:24
  • 2705

ES6模块化及webpack配置

前端使用的一个模块打包工具:https://webpack.js.org/webpack安装 安装 node & npm(因为webpack是基于node开发的) 通过 npm / yarn 的方式来...

搭建ES6运行环境

当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015。在发布之后的将近一年内,...
  • liuhe688
  • liuhe688
  • 2016年06月06日 12:47
  • 12846

ES6简介及Windows 环境搭建

JavaScript的历史诞生JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。时走在技术革新最前沿的Netscape(网景)公司,决定着手开发一种客户端语...

ES6个人学习整理(一)——编译环境搭建

ES6编译环境搭建经过测试,整理出一套ES6编译成ES5的环境 目录结构整个目录结构如下:--ES6 --.git --dist --node_modules --sc...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack搭建ES6环境
举报原因:
原因补充:

(最多只允许输入30个字)