2017-12-26__webpack.output.md

笔记

webpack的output参数的一些使用 文档

webpack3 output 参数有很，这里暂时只记录一些自己已经用到的

filename

指定生成的文件名，可以用[name]占位符(会找entry中的文件名代替)，也可以用[hash], [chunkhash], [id]

path

指定生成文件的输出目录 必须采用绝对路径 一般会用到 path 模块

publicPath

一般是配合 html-webpack-plugin 之类的插件一起用，指定这个生成的文件前面的部分如： pathlicPath: 'https://cdn.com/xx' 在 html-webpack-plugin 注入到html中时，会和这个一起组合成一个url 如： 'https://cdn.com/xx/output.js'

library

指定打包完的模块的名字 配合其他属性一起用，比如和libraryTarget一起用的时候，libraryTarget指定为'umd'的时候，library为'myLibrary'时，打包后结果如下：

(function (root, factory) {
  if (typeof exports === 'object' && typeof module === 'object') {
    // commonjs2
    module.exports = factory();
    // 如果有依赖 如 vue
    // module.exports = factory(require('vue'));
  } else if (typeof define === 'function' && define.amd) {
    // amd
    define('myLibrary', factory);
    // 依赖
    // define('myLibrary', ['vue'], factory);
  } else if (typeof exports === 'object') {
    // commonjs
    exports['myLibrary'] = factory();
    // 依赖
    // exports['myLibrary'] = factory(require('vue'));
  } else {
    // 挂载在全局
    root['myLibrary'] = factory();
    // 依赖
    // root['myLibrary'] = factory(root['vue']);
  }
}(this, function (module) {
  // module 是依赖
  return {
    add: function (a, b) {
      return a + b;
    }
  }
}))

libraryTarget

指定打包完的模块支持的格式，常用的是 umd amd commonjs commonjs2

他的所有可选如下：

假设library设置为 gsui , _entry_return_ 默认指的是入口文件的返回值，可以由 libraryExport 指定

• 'var' (default)

var gsui = _entry_return_
gsui.doSomething();

• 'assign'

生成一个全局的变量

gsui = _entry_return_

• 'this'

this['gsui'] = _entry_return_

• 'window'

window['gsui'] = _entry_return_

• 'global'

global['gsui'] = _entry_return_

• 'commonjs'

exports['gsui'] = _entry_return_

• 'commonjs2'

module.exports = _entry_return_

• 'amd'

// define由其他库提供，如requirejs
define("MyLibrary", [], function() {
  // This module return value is what your entry chunk returns
});

• 'umd'

如上 library 说明

libraryExport

指定返回值，默认是入口文件的返回值的整个对象

• default: _entry_return_
• key(指定需要抛出的key， string): _entry_return_[key]

umdNamedDefine

当 libraryTarget 为 umd时有效 设置为 true 时，将会为 amd 模块设置 name 否则为匿名

// library: 'gsui'
define('gsui', [], function() {
  // ...
})