初始化一个项目
npm init -y:创建一个package.json文件- 创建
src文件夹,已经打包入口文件index.js(index.js文件必须要有的) npm install webpack webpack-cli- 在
index.js中随便写一些代码，然后就可以进行打包了
文件目录结构
进行webpack打包配置
- 在
package.json中配置执行脚本
"scripts": {
"build": "webpack"
},
- 在控制台执行脚本
npm run build -- --mode development(在开发模式下运行)
这样项目就被打包在了dist文件中了:
webpack打包流程
以下是dist/main.js的代码
(function () {
var __webpack_modules__ = ({
"./src/index.js":
(function (module, __unused_webpack_exports, __webpack_require__) {
eval("let a = __webpack_require__(/*! ./sum */ \"./src/sum.js\");\nmodule.exports=a\n\n//# sourceURL=webpack://webpack-example/./src/index.js?");
}),
"./src/sum.js":
(function (module) {
eval("function sum(a, b) {\n return a+b\n}\n module.exports=sum\n\n\n//# sourceURL=webpack://webpack-example/./src/sum.js?");
})
});
/******/ var __webpack_module_cache__ = {};
/******/ function __webpack_require__(moduleId) {
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
}
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ exports: {}
};
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ return module.exports;
}
/******/ var __webpack_exports__ = __webpack_require__("./src/index.js");
})();
首先main.js是一个自执行函数,参数__webpack_modules_是一个对象,属性名为主入口的文件名和主入口文件引入的一些模块名,属性值是该文件的代码。
- 找到入口的文件,通常是
./src/index.js, - 会去找
index.js中引入的模块，然后去加载引入的模块，最后该引入模块通过导出module.exports给主入口模块
