本文在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");