webpack搭建ES6环境

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文件配置：

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

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

然后就运行吧