1.创建项目工程
1.1 创建一个项目文件,直接执行 npm -y init ; 初始化一个基础项目架构
1.2 安装依赖
npm install webpack webpack@3.10.0
1.2 package.json 添加构建命令
"build": "webpack --config webpack.config.js"
1.3 创建webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'dddd.js'
}
}
1.4 创建文件结构
a 文件内容
const a = 'this is a file'
const log = () => a
module.exports = {
log
}
b文件内容
const b = 'this is b file'
const log = () => b
module.exports = {
log
}
index.js 文件内容
import ma from './a.js'
import mb from './b.js'
var a = 1
var b = 2
console.log('a+b', a + b)
console.log('a file', ma.log())
console.log('b file', mb.log())
2.构建输出
dddd.js 文件内容
(function (modules) {
// 定义缓存对象
var installedModules = {};
// 定义获取依赖函数
function __webpack_require__(moduleId) {
// 如果以获取过该依赖,直接从缓存依赖中返回
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 定义模块对象
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
}
// 模块函数执行
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 标识该模块已加载
module.l = true
// 暴露出对象值
return module.exports;
}
// 挂载依赖集合
__webpack_require__.m = modules;
// 挂载缓存依赖集合
__webpack_require__.c = installedModules;
// 定义对象获取方法
__webpack_require__.d = function (exports, name, getter) {
// 判断对象上是否存在该属性方法
if (!__webpack_require__.o(exports, name)) {
// 定义属性获取方法
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
})
}
}
// 定义判断对象属性是否存在方法
__webpack_require__.o = function(object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
}
// 获取getter
__webpack_require__.n = function (module) {
var getter = module && module.__esModule ?
function getDefault() { console.log('获取劫持'); return module['default'] } :
function getModuleExports() { console.log('获取劫持'); return module; };
__webpack_require__.d(getter, 'a', getter);
return getter
}
// 入口函数
__webpack_require__(0);
})([
(function (module, exports, __webpack_require__) {
var __WEBPACK_IMPORTED_MODULE_0__a_js__ = __webpack_require__(1);
var __WEBPACK_IMPORTED_MODULE_0__a_js__default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__a_js__);
var __WEBPACK_IMPORTED_MODULE_1__b_js__ = __webpack_require__(2);
var __WEBPACK_IMPORTED_MODULE_1__b_js__default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__b_js__);
console.log('a file', __WEBPACK_IMPORTED_MODULE_0__a_js__default.a.log())
console.log('b file', __WEBPACK_IMPORTED_MODULE_1__b_js__default.a.log())
}),
(function (module, exports) {
const a = 'this is a file'
const log = () => a
module.exports = {
log
}
}),
(function (module, exports) {
const b = 'this is b file'
const log = () => b
module.exports = {
log
}
})
])