首先,建立目录文件,这里为了介绍方便,建立一个简单的如下的目录
/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;
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";
});