webpack之打包公共库

熊孩子依旧调皮
122 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

公共库

如果我们想要打包成一个供别人使用的库，可以使用output.library来设置库的名字

module.exports = {
    output: {
        library: 'name' 
    }
};
  • 打包范围 确定了库的名字后，使用output.libraryTarget指定库打包出来的规范，它的取值范围为：var``assign``this``jsonp等，默认是var
{
    output: {
        library: 'myLib',
        filename: 'var.js',
        libraryTarget: 'var'
    }
 }
 var myLib = (function(modules) {})({'./src/index.js': function(module, exports) {}});

注意!libraryTarget = global的时候，如果target = node才是global，默认是target=web下global为winodw，保险起见可以使用this

name((function(modules) {})({
  './src/index.js': function(module, exports) {}
}));

output输出配置项

  • externals 它的配置项用于取除打包文件中的第三方模块，减少体积，通常是在自定义js库的时候用到，比如开发一个jquery插件或者vue的扩展，不需要把juqery和vue打包到bundle，因入库的方式应该交由使用者
js library导出output.libraryTarget使用者引入方式使用者提供给被依赖模块的方式
默认导出方式var只能script引入全局变量形式
commonjscommonjscommonjs规范引入被引入的依赖模块按照commonjs引入
amdamdamd规范引入被引入的依赖模块按照amd引入
umdumd可以使用script标签和connonjs、amd引入依赖模块需要按照对应方式引入

如果不是在开发js库，没有设置library、libraryTarget的配置信息，那么打包的文件只能使用script标签引入，因此那些被去除的模块只能以全局变量的方式引入

  • target 在开发过程中，不仅仅是开发web应用，还可能开发的是Nodejs服务electron跨平台，因为对宿主环境不同所以构建需要特殊处理可以通过target来指定构建目标
module.exports = {
    target: 'web' // 默认是 web，可以省略
};

该target的值有两种：string和funciton！ string的类型有七种

  1. web 编译为类，浏览器环境可运行 2. node 编译为nodejs环境可运行（使用nodejs require加载chunk）
  2. async-node nodejs环境可用（使用fs和vm异步加载分块）
  3. electron-main 编译为Electron主进程 5.electron-renderer 编译为Electron渲染进程
  4. node-webkit 编译为WebKit可用，并且使用jsonp去加载分块。支持Nodejs内置模和nw.gui导入
  5. webworker编译为一个webworker 除了string类型，target还支持function类型，这个函数接受一个compiler作为参数，比如增加插件：
const webpack = require('webpack');
const options = {
    target: compiler => {
        compiler.apply(new webpack.JsonpTemplatePlugin(options.output), 
        new webpack.LoaderTargetPlugin('web'));
    }
};

参考资料

webpack-配置

avatar
文章
阅读
粉丝