前言
本文着重介绍import、require混用的情况下打包结果有何不同，以及webpack打包出的js运行机制。webpack负责将commonjs和es6模块转化为浏览器认识的语句。
babel配置
{ "presets": [ ["es2015", { "modules": false}], "stage-2" ]}复制代码 各模块均为es6模块的情况
项目结构：
app.js(entry):
import c from './c';import {c1,c2} from './c'console.log(c,c1,c2)export default '我是a';复制代码 c.js
import b from './b'export let c1 = '我是c111'export let c2 = '我是c222'export default '我是c';复制代码
b.js
export default 'bbb';复制代码
html
复制代码
结果解析：
此种情况app.js、b.js、c.js都是es6模块。
-
html控制台输出
我是c 我是c111 我是c222{default: "我是a", __esModule: true}复制代码 -
打包出的app.js如下：
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__c__ = __webpack_require__(2);console.log(__WEBPACK_IMPORTED_MODULE_0__c__["c" /* default */], __WEBPACK_IMPORTED_MODULE_0__c__["a" /* c1 */], __WEBPACK_IMPORTED_MODULE_0__c__["b" /* c2 */]);/* harmony default export */ __webpack_exports__["default"] = ('我是a');复制代码app暴露出的是一个对象，并且增加了default和__esModule属性。
-
c.js如下
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return c1; });/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return c2; });/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__b__ = __webpack_require__(4);var c1 = '我是c111';var c2 = '我是c222';/* harmony default export */ __webpack_exports__["c"] = ('我是c');复制代码c.js暴露了三个属性。并且c将export default转化为了"c"属性，然后会通过调用__WEBPACK_IMPORTED_MODULE_0__c__["c"]来获取c的default值。
-
b.js
/* unused harmony default export */ var _unused_webpack_default_export = ('bbb');复制代码由于b.js虽然被c.js import了，但是没有使用，所以b.js并没有export出去。压缩模式下b.js会被删除。这就是webpack tree-shaking功能
结论：
如果入口模块是es6模块，而且引用的模块也是es6模块，那么引用编译后不会添加{__esModule:true}，只有入口模块才会添加{__esModule:true}，如果入口模块有export default的值，那么default会转化为暴露对象的default属性。
引入的模块为commonjs模块的情况:
项目结构：
将案例一的c.js改为：
let c1 = 'c1'let c2 = 'c2'module.exports = { c1, c2,}复制代码 结果解析：
此种情况app.js、b.js是es6模块,c.js是commonjs模块
-
c.js如下：
var c1 = 'c1';var c2 = 'c2';module.exports = { c1: c1, c2: c2};复制代码
结论：
如果入口模块是es6模块，引入的模块是commonjs模块，那么引入的模块会原样输出，并且引入的模块将不会有default属性。
引入的模块为commonjs模块但未使用的情况:
项目结构：
将案例一的b.js改为：
module.exports = 'bbb'复制代码
结果解析：
此种情况app.js、c.js是es6模块,b.js是commonjs模块，但b只是import了并未使用
-
b.js如下：
module.exports = 'bbb'复制代码
结论：
如果入口模块是es6模块，引入的模块是commonjs模块但并未使用，那么webpack的tree-shaking功能不会生效，将打包的js压缩后还是会存在b.js复制代码
入口模块为commonjs模块，引入的模块为es6模块:
项目结构：
将案例一的app.js改为：
var b = require('./b')var c = require('./c')console.log(b.default)console.log(c)module.exports = { a:'我是a'}复制代码 结果解析：
此种情况b.js、c.js是es6模块,app.js是commonjs模块
-
app.js如下：
var b = __webpack_require__(3);var c = __webpack_require__(0);console.log(b.default);console.log(c);module.exports = { a: '我是a'}复制代码 -
b.js如下
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });/* harmony default export */ __webpack_exports__["default"] = ('bbb');复制代码
结论：
如果入口模块是commonjs模块，引入的模块是es6模块，那么es6模块编译后会添加{__esModule:true}。如果被调用的es6模块中恰好有export default语句，那么编译后的es6模块将会添加.default = ...。这时候如果入口commonjs模块想调用es6模块的default值，就需要手动添加b.default。例如：var b = require('./b').default console.log(b)。另：commonjs模块中不能使用import语句，会报错！
入口模块和引入的模块为commonjs模块的情况
结论：
模块全部原样输出。没有export default的情况了。
综上
-
es6模块调用commonjs模块，可以直接使用commonjs模块，commonjs模块将不会被webpack的模块系统编译而是会原样输出，并且commonjs模块没有.default属性
-
es6模块调用es6模块,被调用的es6模块不会添加{__esModule:true}，只有调用者才会添加{__esModule:true}；并且可以进行tree-shaking操作，如果被调用的es6模块只是import进来，但是并没有被用到，那么被调用的es6模块将会被标记为/* unused harmony default export */，在压缩时此模块将会被删除（例外：如果被调用的es6模块里有立即执行语句，那么这些语句将会被保留）。
-
如果是commonjs模块引用了es6模块，那么es6模块编译后会添加{__esModule:true}。如果被调用的es6模块中恰好有export default语句，那么编译后的es6模块将会添加.default = ...，这时调用require进来的es6模块默认值，就需要例如：var b = require('./b').default console.log(b)
-
如果commonjs模块调用commonjs模块，那么commonjs模块会原样输出。
-
commonjs模块中不能使用import语句，会报错
-
webpakc的output设置会设置模块的打包格式和保留变量，如果设置library = 'test'，那么打包后的js执行完成后所有的模块将会挂到window.test上