webpack4.x最佳实践-1.webpack是什么

最新推荐文章于 2023-09-15 15:13:22 发布

波帝伯爵

最新推荐文章于 2023-09-15 15:13:22 发布

阅读量254

点赞数

分类专栏：前端学习笔记前端工程化文章标签： webpack

本文链接：https://blog.csdn.net/HYB2012/article/details/91353455

版权

前端学习笔记同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

前端工程化

4 篇文章 0 订阅

订阅专栏

文章目录

面向过程
面向对象
模块打包
webpack是什么

面向过程

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。

面向过程的编程具体到前端可以类比实现一个创建包含header、sidebar、content三部分的页面:

<body>
<!-- index.html -->
  <div id="root">
    <p>webpack4 demo</p>
  </div>
  <script src="./index.js"></script>
</body>

// index.js

var root = document.getElementById('root')

var node = document.createElement('div')
node.innerHTML = 'header'
root.append(node)

var node2 = document.createElement('div')
node2.innerHTML = 'sidebar'
root.append(node2)

var node3 = document.createElement('div')
node3.innerHTML = 'content'
root.append(node3)

index.js中创建header、sidebar、contnet三部分的代码依次执行，似乎并没有什么问题，然而实际中的业务可能会非常复杂，对应的代码块也就非常庞大，会相应的带来维护上的问题，例如变量污染、引入顺序、调试困难，长期发展下去，代码将不可维护。通过拆分功能模块，创建闭包执行等方式可以避免一些问题，然而还是存在代码复用性差，可维护性差等问题。

面向对象

<body>
  <!-- index.html -->
  <div id="root">
    <p>webpack4 demo</p>
  </div>
  <script src="./header.js"></script>
  <script src="./sidebar.js"></script>
  <script src="./content.js"></script>
  <script src="./index.js"></script>
</body>

// header.js
function Header(params) {
  var root = document.getElementById('root')

  var node = document.createElement('div')
  node.innerHTML = 'header'
  root.append(node)
}

//siderbar.js
function Sidebar(params) {
  var root = document.getElementById('root')

  var node = document.createElement('div')
  node.innerHTML = 'sidebar'
  root.append(node)

}

//content.js

function Content(params) {
  var root = document.getElementById('root')

  var node = document.createElement('div')
  node.innerHTML = 'content'
  root.append(node)
}

上述改进有以下几个问题

index.html页面加载了多个js文件，多了http请求，页面加载耗时增加
index.js只能最后加载
index.js中的模块调用方法、模块位置不易分析

理想的做法是在index.html中只引入一个index.js文件，而在index.js中显式的引入其他三个代表不同业务的模块，这样即可一定程度上避免上述的弊端

模块打包

<body>
  <!-- index.html -->
  <div id="root">
    <p>webpack4 demo</p>
  </div>
  <script src="./index.js"></script>
</body>

// header.js
function Header(params) {
  var root = document.getElementById('root')

  var node = document.createElement('div')
  node.innerHTML = 'header'
  root.append(node)
}
export default Header


//siderbar.js
function Sidebar(params) {
  var root = document.getElementById('root')

  var node = document.createElement('div')
  node.innerHTML = 'sidebar'
  root.append(node)

}
export default Sidebar


//content.js
function Content(params) {
  var root = document.getElementById('root')

  var node = document.createElement('div')
  node.innerHTML = 'content'
  root.append(node)
}
export default Content


// index.js
import Header from './header.js'
import Sidebar from './sidebar.js'
import Content from './content.js'

new Header()
new Sidebar()
new Content()

然而页面并不能正常的显示，因为浏览器并不能理解执行import、export语法，在此需要引入webpack翻译这些esmodule语法。

经过webpack处理后会发现根目录下会自动生成一个dist目录，目录下有一个main.js,main.js中有上述4个js的代码片段


/***/ "./src/content.js":
/*!************************!*\
  !*** ./src/content.js ***!
  \************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n//content.js\r\n\r\nfunction Content(params) {\r\n  var root = document.getElementById('root')\r\n\r\n  var node = document.createElement('div')\r\n  node.innerHTML = 'content'\r\n  root.append(node)\r\n}\r\n/* harmony default export */ __webpack_exports__[\"default\"] = (Content);\n\n//# sourceURL=webpack:///./src/content.js?");

/***/ }),

/***/ "./src/header.js":
/*!***********************!*\
  !*** ./src/header.js ***!
  \***********************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n// header.js\r\n\r\nfunction Header(params) {\r\n  var root = document.getElementById('root')\r\n\r\n  var node = document.createElement('div')\r\n  node.innerHTML = 'header'\r\n  root.append(node)\r\n}\r\n/* harmony default export */ __webpack_exports__[\"default\"] = (Header);\n\n//# sourceURL=webpack:///./src/header.js?");

/***/ }),

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _header_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./header.js */ \"./src/header.js\");\n/* harmony import */ var _sidebar_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./sidebar.js */ \"./src/sidebar.js\");\n/* harmony import */ var _content_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./content.js */ \"./src/content.js\");\n// index.js\r\n\r\n\r\n\r\n\r\n\r\nnew _header_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]()\r\nnew _sidebar_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]()\r\nnew _content_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]()\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ }),

/***/ "./src/sidebar.js":
/*!************************!*\
  !*** ./src/sidebar.js ***!
  \************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n//siderbar.js\r\n\r\nfunction Sidebar(params) {\r\n  var root = document.getElementById('root')\r\n\r\n  var node = document.createElement('div')\r\n  node.innerHTML = 'sidebar'\r\n  root.append(node)\r\n\r\n}\r\n/* harmony default export */ __webpack_exports__[\"default\"] = (Sidebar);\n\n//# sourceURL=webpack:///./src/sidebar.js?");

/***/ })

webpack是什么

官方的介绍:webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.(webpack是一个模块打包器.webpakc的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用，但它也能胜任转换、捆绑、打包任何资源的工作)

简单的来说，webpack就是一个模块打包器，把不同的模块打包捆绑成一个js文件供浏览器使用。