webpack的模块打包

最新推荐文章于 2024-07-15 07:45:00 发布

chenyHahaha

最新推荐文章于 2024-07-15 07:45:00 发布

阅读量507

点赞数

分类专栏： webpack 文章标签： webpack 模块打包

本文链接：https://blog.csdn.net/chenyHahaha/article/details/94970730

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack以模块方式导出的配置

module.exports = {
    entry: 'XX',
    mode: 'development',
    devtool: 'cheap-module',
    output: {
        filename: 'XX',
        path: 'XXX',
        library: 'MyLibrary',
        libraryTarget: 'umd',
    }
}

模块打包主要依赖于output配置的librayTarget，它决定模块导出的类型，类型主要有三大类：

(下面例子中的_entry_return代表模块的导出)

作为变量导出

libraryTarget: 'var'
library: 'MyLibrary'

// 最后生成代码大概就是
var MyLibrary = _entry_return

作为对象导出

libraryTarget: "window"
library: 'MyLibrary'

window['MyLibrary'] = _entry_return_;

作为模块导出

经典的cmd、amd、umd 这3中导出方式，虽然esm的模块方案已成为主流，但是浏览器跑不了。

cmd

libraryTarget: 'commonjs2'
library: 'MyLibrary'        // 会被忽略

module.exports = _entry_return_;

amd

libraryTarget: 'amd',
library: 'MyLibrary',

define('MyLibrary', [], function() {
    return _entry_return;
})

umd

libraryTarget: 'umd'
library: 'MyLibrary'

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports['MyLibrary'] = factory();
  else
    root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});