Front End

[webpack] libraryTarget代码结构

2017-12-01  本文已影响86人  何幻

1. 源代码

1.1 目录结构

.
├── dist
├── node_modules
├── package.json
├── src
│   └── index.js
└── webpack.config.js

1.2 package.json

{
  ...
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "webpack": "^3.8.1"
  }
}

1.3 webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        index: [path.resolve(__dirname, 'src/index.js')]
    },
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: '[name].js',

        // var, assign, this, window, global,
        // commonjs, comonjs2, amd, umd, jsonp
        libraryTarget:'var',    
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader'
            }
        ]
    }
};

1.4 .babelrc

{
    "presets": [
        "es2015",
        "stage-0"
    ]
}

1.5 src/index.js

'hello'

2. 对应不同output.libraryTarget的代码结构

2.1 var

(function (modules) {
    function __webpack_require__(moduleId) { }
    return __webpack_require__(__webpack_require__.s = 0);
})([
    (function (module, exports, __webpack_require__) { }),
    (function (module, exports, __webpack_require__) { })
]);

2.2 assign

=
(function (modules) {
    function __webpack_require__(moduleId) { }
    return __webpack_require__(__webpack_require__.s = 0);
})([
    (function (module, exports, __webpack_require__) { }),
    (function (module, exports, __webpack_require__) { })
]);

2.3 this

(function (e, a) {
    
}(
    this,
    (function (modules) {
        function __webpack_require__(moduleId) { }
        return __webpack_require__(__webpack_require__.s = 0);
    })([
        (function (module, exports, __webpack_require__) { }),
        (function (module, exports, __webpack_require__) { })
    ]))
);

2.4 window

(function (e, a) {
    
}(
    window,
    (function (modules) {
        function __webpack_require__(moduleId) { }
        return __webpack_require__(__webpack_require__.s = 0);
    })([
        (function (module, exports, __webpack_require__) { }),
        (function (module, exports, __webpack_require__) { })
    ]))
);

2.5 global

(function (e, a) {
    
}(
    global,
    (function (modules) {
        function __webpack_require__(moduleId) { }
        return __webpack_require__(__webpack_require__.s = 0);
    })([
        (function (module, exports, __webpack_require__) { }),
        (function (module, exports, __webpack_require__) { })
    ]))
);

2.6 commonjs

(function (e, a) {
    
}(
    exports,
    (function (modules) {
        function __webpack_require__(moduleId) { }
        return __webpack_require__(__webpack_require__.s = 0);
    })([
        (function (module, exports, __webpack_require__) { }),
        (function (module, exports, __webpack_require__) { })
    ]))
);

2.7 commonjs2

module.exports = (function (modules) {
    function __webpack_require__(moduleId) { }
    return __webpack_require__(__webpack_require__.s = 0);
})([
    (function (module, exports, __webpack_require__) { }),
    (function (module, exports, __webpack_require__) { })
]);

2.8 amd

define(function () {
    return (function (modules) {
        function __webpack_require__(moduleId) { }
        return __webpack_require__(__webpack_require__.s = 0);
    })([
        (function (module, exports, __webpack_require__) { }),
        (function (module, exports, __webpack_require__) { })
    ])
});;

2.9 umd

(function webpackUniversalModuleDefinition(root, factory) {
    
})(
    typeof self !== 'undefined' ? self : this,
    function () {
        return (function (modules) {
            function __webpack_require__(moduleId) { }
            return __webpack_require__(__webpack_require__.s = 0);
        })([
            (function (module, exports, __webpack_require__) { }),
            (function (module, exports, __webpack_require__) { })
        ]);
    }
);

2.10 jsonp

((function (modules) {
    function __webpack_require__(moduleId) { }
    return __webpack_require__(__webpack_require__.s = 0);
})([
    (function (module, exports, __webpack_require__) { }),
    (function (module, exports, __webpack_require__) { })
]));;

参考

Webpack: output.libraryTarget

上一篇 下一篇

猜你喜欢

热点阅读