webpack+babel+es6环境配置


npm init //生成package.json文件
npm install webpack --save-dev
npm install webpack_plugin_makeheadcdn --save-dev //想要更新时间戳的时候安装的，可以不安装
npm install --save-dev babel-core babel-preset-es2015
npm install --save-dev babel-loader
添加webpack.config.js文件，如下：

 1 /**
 2 * webpack配置文件
 3 */
 4 
 5 'use strict';
 6 
 7 var webpack_plugin_makeheadcdn = require('webpack_plugin_makeheadcdn');
 8 var path = require('path');
 9 
10 var fixZero = function(str) {
11    if (str < 10) {
12       return "0".concat(str);
13    }
14    return str;
15 };
16 
17 Date.prototype.fmt = function() {
18    var D = [
19       this.getFullYear(), fixZero((this.getMonth() + 1)), fixZero(this.getDate()), 
20       fixZero(this.getHours()), fixZero(this.getMinutes()), fixZero(this.getSeconds())
21    ];
22    return D.join('');
23 };
24 
25 var timechuo = new Date().fmt();
26 
27 var config = {
28 　　entry: {
29    　　mkt_sdk: "./main.js",//入口文件
30 　　},
31 　　output: {
32   　　 path: path.resolve(__dirname,'./mkt_sdk/dist/'),
34 　 　　filename: "[name].v2.0.js",
35 　 　　chunkFilename: "[name].v2.0.js"
36 　　},
37 　　module: {
38    　　loaders: [{
39       　　test: /\.js$/,
40       　　exclude: /node_modules/,
41       　　loader: "babel-loader"
42   　　 }]
43 　　},
44 　　plugins: [
45    　　new webpack_plugin_makeheadcdn({
46       　　time: timechuo, //用于每次压缩更新时间戳，也可以不配置
47    　　})
48　　 ]
49 };
50 
52 module.exports = config;

添加.babelrc文件，如下：

1 {
2 "presets": ["es2015"]
3 }

压缩webpack --config webpack.config.js

示例：main.js

1 import Person from './Person.js';
2 
3 let p = new Person ('张三',20);
4 document.write(p.say());

Person.js

 1 class Person {
 2     constructor(name, age) {
 3         this.name = name;
 4         this.age = age;
 5     }
 6     say() {
 7         return `我是${this.name},我今年${this.age}岁了。`;
 8     }
 9 }
10 export default Person;

压缩后打印出：我是张三，我今年20岁了。

posted @ 2017-04-11 17:52  EnaBlog  阅读(521)  评论(0)    收藏  举报