webpack基础实践2

本文在webpack基础实践1的基础上，主要阐述的是模块化和ES6与webpack的结合使用。

1.模块化

commonJS/CMD风格
module1.js

var obj = {
    val:"hello from m1",
    sayHi:function(){
        document.write('hi');
    },
    sum:function(a,b){
        return a+b;
    }
};
module.exports = obj;

AMD风格
module2.js

define(['./module1.js'],function(m1){
    return "1+2="+m1.sum(1,2);
});

入口文件entry.js

var m1 = require("./module1.js");
document.write("<br>");    
document.write(m1.val);    
document.write("<br>");    
var m2 = require("./module2.js");
document.write(m2); 

结果显示为

hello from m1
1+2=3

当然实际项目中不建议两种风格的模块都使用，选择其中一种模块风格即可。

2.ES6

webpack是支持babel转化器的，所以可以将ES6代码转为ES5供现在的浏览器使用
- 1) 安装babel依赖库

npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev

• 2) 新建一个.babelrc文件，内容是：

{
  "presets": [
    "es2015"
  ]
}

• 3) 配置webpack.config.js文件

module: {loaders: [
    { test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',}
]

• 4) 入口文件entry.js中就可以使用了

/*es6*/
require("./es6test2.js");

es6test2.js

import Point from './es6test1';

let p = new Point(1,2);
document.write(p.toString()); 

es6test1.js

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
export default Point; 

编译完成即可

3.总结

3.1 配置文件webpack.config.js

module.exports = {
    entry: "./src/home/js/entry.js", //入口文件
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }, //css加载器
            { test: /\.scss$/, loader: "style!css!sass" }, //sass加载器
            { test: /\.(jpg|png)$/, loader: "url?limit=8192" }, //图片加载器
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', }
        ]
    }
};

3.2 加载的依赖库package.json

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "webpack demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "css-loader": "^0.24.0",
    "file-loader": "^0.9.0",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2"
  }
}

3.3 入口文件entry.js

require("./style.css");
require("./index.scss");

document.write(require("./content.js")); 
document.write("</br/>");    

var img = document.createElement("img"); 
img.src = require("./img/webpack.png"); 
document.body.appendChild(img);
document.write("</br/>");    

/*模块化*/
var m1 = require("./module1.js");
document.write("</br/>");    
document.write(m1.val);    
document.write("<br>");    
var m2 = require("./module2.js");
document.write(m2);    
document.write("<br>");    

/*es6*/
require("./es6test2.js");