Webpack模块打包器
Webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。
TL;DR
- 捆绑 ES 模块、CommonJS 和 AMD 模块(以及绑定)。
- 可以创建在运行时异步加载的单个捆绑包或多个块(以减少初始加载时间)。
- 在编译过程中解决了依赖性,从而减小了运行时大小。
- 加载程序可以在编译时对文件进行预处理,例如,将 TypeScript 转换为 JavaScript、将Handlebars字符串转换为已编译函数、将图像转换为 Base64,等等。
- 高度模块化的插件系统可以执行您的应用程序所需的其他任何操作。
原理
示例代码
// webpack is a module bundler // This means webpack takes modules with dependencies // and emits static assets representing those modules. // dependencies can be written in CommonJs var commonjs = require("./commonjs"); // or in AMD define(["amd-module", "../file"], function(amdModule, file) { // while previous constructs are sync // this is async require(["big-module/big/file"], function(big) { // for async dependencies webpack splits // your application into multiple "chunks". // This part of your application is // loaded on demand (Code Splitting) var stuff = require("../my/stuff"); // "../my/stuff" is also loaded on demand // because it's in the callback function // of the AMD require }); }); require("coffee!./cup.coffee"); // "Loaders" can be used to preprocess files. // They can be prefixed in the require call // or configured in the configuration. require("./cup"); // This does the same when you add ".coffee" to the extensions // and configure the "coffee" loader for /\.coffee$/ function loadTemplate(name) { return require("./templates/" + name + ".jade"); // many expressions are supported in require calls // a clever parser extracts information and concludes // that everything in "./templates" that matches // /\.jade$/ should be included in the bundle, as it // can be required. } // ... and you can combine everything function loadTemplateAsync(name, callback) { require(["bundle?lazy!./templates/" + name + ".jade"], function(templateBundle) { templateBundle(callback); }); }
评论