WebPack系列教程（十二）：示例

最新推荐文章于 2024-08-20 17:38:15 发布

zzzkk2009

最新推荐文章于 2024-08-20 17:38:15 发布

阅读量4.9k

点赞数 1

分类专栏： javascript学习文章标签： webpack

javascript学习专栏收录该内容

35 篇文章 0 订阅

订阅专栏

简单示例

基本用法

CommonJs

example.js

var inc = require('./increment').increment;
var a = 1;
inc(a); // 2

increment.js

var add = require('./math').add;
exports.increment = function(val) {
    return add(val, 1);
};

math.js

exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

js/output.js

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "js/";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/*!**********************!*\
  !*** ./increment.js ***!
  \**********************/
/***/ function(module, exports, __webpack_require__) {

    var add = __webpack_require__(/*! ./math */ 2).add;
    exports.increment = function(val) {
        return add(val, 1);
    };

/***/ },
/* 1 */
/*!********************!*\
  !*** ./example.js ***!
  \********************/
/***/ function(module, exports, __webpack_require__) {

    var inc = __webpack_require__(/*! ./increment */ 0).increment;
    var a = 1;
    inc(a); // 2

/***/ },
/* 2 */
/*!*****************!*\
  !*** ./math.js ***!
  \*****************/
/***/ function(module, exports) {

    exports.add = function() {
        var sum = 0, i = 0, args = arguments, l = args.length;
        while (i < l) {
            sum += args[i++];
        }
        return sum;
    };

/***/ }
/******/ ]);

Info

Uncompressed

Minimized (uglify-js, no zip)

代码拆分

Code Splitting

这个例子展示了如何使用require.ensure来实现代码拆分。

a和b是通过CommonJs来加载的。
c是通过require.ensure数组来加载依赖。
- 这意味着：使其可用，但不执行它；
- webpack会按需加载它；
b和d是通过CommonJs在require.ensure的回调中被加载。
- webpack会探测到它们在on-demand-callback，并会按需加载它们；
- webpack优化器能优化b
  - 使得它通过父chunks已经变得可用；

你会看到webpack会输出两个files/chunks：

output.js是entry chunk，它包含：
- 模块系统
- chunk加载逻辑
- example.js的entry point
- 模块 a
- 模块b
1.js是附加的chunk(按需加载)，它包含：
- 模块 c
- 模块d
  你能看到那些chunks是通过JSONP加载的。这些附加的chunks非常小，并且已经被压缩了。

code-splitting-bundle-loader

这个例子结合代码拆分和loaders。

bundle loader主要用来包装那些按需加载的模块文件，并生产一个包装模块。这个包装模块返回一个函数，可以被异步访问接收内部模块。

多个entry点

多个entry点

这个例子说明了如何通过commons chunk来使用多个entry点。

在这个例子中，你有两个html页面pageA和pageB。你想单独为每个页面打包。此外，你要创建一个在你各个页面中包含的模块文件的共享包(假设这里有很多模块)。这些页面还使用代码拆分来按需加载较少使用的功能特性。

你能看到通过entry选项如何如何定义多个entry点，以及在output中被要求的改变([name])。你同时还能看到如何使用CommonsChunkPlugin插件。

你能看到输出文件：

commons.js包含：
- 模块系统
- chunk加载逻辑
- 在各页面共享的common.js 模块
pageA.bundle.js 包含: (pageB.bundle.js类似)：
- entry点pageA.js
- 可能包含那些仅被页面A使用的模块
0.chunk.js是附加chunk，被各个页面所共享。它包含：
- shared.js模块

你同时能看到控制台打印的一些其他信息：

生成的文件
分块文件、名称和id
chunks当中的模块
模块被包含进来的原因
chunk被创建的原因

模块风格

labeled modules

这个例子展示了如何在配置中添加插件来支持Labeled Modules。

CommonJs, AMD and labeled modules mixed

这个例子说明了，在webpack中可以混合使用多种风格的模块系统。这里，CommonJs, AMD and Labeled Modules三种风格的模块系统被使用了。除此，还有多种动态加载的方式（"../require.context/templates/"+amd1+".js"和Math.random() < 0.5 ? "./commonjs" : "./amd"）。

库和外部资源

带有多个entry点和UMD的库选项

该例子演示了如何通过webpack构建一个复杂的库。该库包含对自己和一起使用的多个部分。

当使用script标签引入库时，会导出到MyLibrary命名空间上，所有属性都挂载在这个命名空间上（MyLibrary.alpha和 MyLibrary.beta）。当通过CommonJs或者AMD加载库时，只是导出的每个部分。

我们使用多个入口点（entry选项）构建作为单独的输出文件的库的各个部分。out.filename选项包含[name]属性，可以给每个输出文件取不同的名称。

我们使用libraryTarget选项来生成可以在CommonsJs, AMD 和script标签中使用的UMD模块。library选项定义命名空间。在library选择中使用name属性，可以给每个entry一个不同的命名空间。

你能看到webpack会自动打包所有模块，使得他们能在所有环境中使用。你所需要做的只是进行一些简单的配置。

注意：没有多个entry点时，也可以使用library 和libraryTarget，这时你就不需要指定[name]属性。

注意：当你的库会依赖那些不会包含进编译后的版本中时，你可以使用externals选项。查看externals示例。

using stuff from other scripts

这个例子演示了通过webpack如何构建一个依赖于不会包含进编译后版本的外部库的库。

我们使用libraryTarget: "umd"选项来构建UMD模块。如果我们不指定library选项，那么library就会导出到root命名空间。

在这个例子中，我们只需要指定("add")。然后它就会被解析成CommonJs和AMD模块，当使用script标签时，add会成为全局函数。

在下面这个复杂点的例子中，我们为每个环境指定不同的值：

environment	config value	resolved as
CommonJs (strict)	[“./math”, “subtract”]	require(“./math”).subtract
CommonJs (node.js)	`"./subtract"`	require(“./subtract”)
AMD	“subtract”	define([“subtract”], …)
script tag	“subtract”	this.subtract