webpack与es6

首先，建立目录文件，这里为了介绍方便，建立一个简单的如下的目录

/web根目录
-es6
     main.js
     Person.js
index.html
webpack.config.js

然后，全局安装webpack

npm install webpack -g

在当前目录下安装插件

npm install webpack --sava-dev
npm install babel-loader --save-dev //安装 babel-loader
npm install babel-preset-es2015 --sava-dev //安装转码规则
npm install babel-core --sava-dev //babel
npm install webpack-zepto --sava-dev   //安装zepto
npm install less-loader --sava-dev
npm install css-loader --sava-dev
npm install style-loader --sava-dev
npm install less --sava-dev  //安装less

webpack.config.js配置文件

var path = require('path');
module.exports = {
  entry: "./es6/main.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: path.join(__dirname, 'es6'),
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.less$/,
        loader: "style!css!less"
      }     
    ]
  }
}

可以在页面中引入 less和zepto

import $ from 'webpack-zepto';
import './../css/index.less';

Person.js

class Person{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }

  say(){
    return `我是${this.name},我今年${this.age}岁了。`;
  }
}

export default Person;

main.js

import Person from './Person.js';
import $ from 'webpack-zepto';
import './../css/index.less';


let p = new Person ('张三',20);
document.write(p.say());



//let btn = document.getElementById("btn");
//btn.addEventListener('click',()=>{
//	alert("111");
//});
$("#btn").on("click",()=>{
	alert("111");
	location.href = "sss.html";
});