建站
咨詢
售后
建站咨詢
新聞中心
[[412320]]
前言
本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。
創(chuàng)新互聯(lián)公司擁有網(wǎng)站維護(hù)技術(shù)和項目管理團(tuán)隊，建立的售前、實(shí)施和售后服務(wù)體系，為客戶提供定制化的成都網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、四川聯(lián)通機(jī)房服務(wù)器托管解決方案。為客戶網(wǎng)站安全和日常運(yùn)維提供整體管家式外包優(yōu)質(zhì)服務(wù)。我們的網(wǎng)站維護(hù)服務(wù)覆蓋集團(tuán)企業(yè)、上市公司、外企網(wǎng)站、成都商城網(wǎng)站開發(fā)、政府網(wǎng)站等各類型客戶群體，為全球上千家企業(yè)提供全方位網(wǎng)站維護(hù)、服務(wù)器維護(hù)解決方案。
這是官網(wǎng)對webpack的解釋。提到模塊，模塊顧名思義是獨(dú)立的JS文件。與之相近的詞模塊化，通俗的講就是我們平時組織和管理代碼方法的一種實(shí)現(xiàn)。
戰(zhàn)前準(zhǔn)備
我們先來測試一下webpack的打包。
1.初始化
創(chuàng)建項目目錄
- mkdir webpackmini
2.安裝webpack依賴
- yarn add webpack -D
or
- npm install webpack -D
3.安裝webpack-cli依賴 這里，稍微注意一下，我們可以下載這個版本的，最新版的安裝之后好像不可用。
- yarn add webpack-cli@3.3.12 -D
or
- npm install webpack@3.3.12 -D
創(chuàng)建入口文件
1.創(chuàng)建項目主目錄
- mkdir src
2.創(chuàng)建入口文件
- touch main.js
3.編輯入口文件
我們這里使用最簡單的一行代碼。
- console.log('maomin1');
創(chuàng)建編輯webpack 配置文件
在項目根目錄下鍵入命令：
- touch webpack.config.js
并編輯。
- const path = require('path');
- module.exports = {
- mode:'development',
- entry:'./src/main.js',
- output:{
- path:path.resolve(__dirname,'dist'),
- filename:'bundle.min.js'
- }
- }
運(yùn)行測試打包
我們這里使用 npx webpack 命令進(jìn)行打包。打包成功!
我們來到打包好的bundle.min.js文件，會看到以下代碼：
- /*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
- /******/ (() => { // webpackBootstrap
- /******/ var __webpack_modules__ = ({
- /***/ "./src/main.js":
- /*!*********************!*\
- !*** ./src/main.js ***!
- \*********************/
- /***/ (() => {
- eval("console.log('maomin1');\n\n//# sourceURL=webpack://webpackmini/./src/main.js?");
- /***/ })
- /******/ });
- /************************************************************************/
- /******/
- /******/ // startup
- /******/ // Load entry module and return exports
- /******/ // This entry module can't be inlined because the eval devtool is used.
- /******/ var __webpack_exports__ = {};
- /******/ __webpack_modules__["./src/main.js"]();
- /******/
- /******/ })()
- ;
我們將注釋刪掉后，會精簡不少!
- (() => {
- var __webpack_modules__ = ({
- "./src/main.js":
- (() => {eval("console.log('maomin1');\n\n//# sourceURL=webpack://webpackmini/./src/main.js?");})
- });
- var __webpack_exports__ = {};
- __webpack_modules__["./src/main.js"]();
- })();
準(zhǔn)備實(shí)戰(zhàn)
開始實(shí)戰(zhàn)實(shí)現(xiàn)一個基礎(chǔ)版的webpack。
1.首先我們在項目根目錄下創(chuàng)建一個文件夾。
- mkdir maominpack
2.然后，在maominpack文件夾下創(chuàng)建一個bin文件夾
- mkdir bin
3.最后在bin文件夾下創(chuàng)建一個maominpack.js文件
編輯如下：
- #!/usr/bin/env node
- const fs = require('fs');
- const ejs = require('ejs');
- const config = require('../../webpack.config.js');
- const entry = config.entry;
- const output = `${config.output.path}\/${config.output.filename}`;
- const content = fs.readFileSync(entry,'utf8');
- let template = `
- (() => {
- var __webpack_modules__ = ({
- "<%-entry%>":
- (() => {
- eval("<%-content%>");
- })
- });
- var __webpack_exports__ = {};
- __webpack_modules__["<%-entry%>"]();
- })()
- ;
- `
- let package = ejs.render(template,{
- entry,
- content
- });
- fs.writeFileSync(output,package);
首先，我們在頭部指定環(huán)境為node環(huán)境，并且引入fs模塊。然后，我們引入了ejs依賴，如果不是很了解ejs的，可以去官網(wǎng)瀏覽下。這里就簡單的介紹一下。
- “E” 代表什么?可以表示 “可嵌入(Embedded)”，也可以是“高效(Effective)”、“優(yōu)雅(Elegant)”或者是“簡單(Easy)”。EJS 是一套簡單的模板語言，幫你利用普通的 JavaScript 代碼生成 HTML 頁面。EJS 沒有如何組織內(nèi)容的教條;也沒有再造一套迭代和控制流語法;有的只是普通的 JavaScript 代碼而已。
我們看到在將帶有綁定值的字符串賦值給template變量，我們這里使用的ejs.render()，第一個參數(shù)是需要處理的字符串，第二個參數(shù)使我們需要修改的值，是一個對象。
4.在package.json文件下編輯如下：
- {
- "name": "maominpack",
- "version": "1.0.0",
- "bin":{
- "maominpack":"bin/maominpack.js"
- },
- "main": "index.js",
- "license": "MIT"
- }
5.為其命令創(chuàng)建快捷方式
- npm link
6.為其配置在其他目錄也可使用此命令
- npm config ls
7.驗(yàn)證打包
我們將src/main.js修改一下。
- console.log('maomin2');
然后，鍵入命令：
- maominpack
最后，檢查一下bundle.min.js:
- (() => {
- var __webpack_modules__ = ({
- "./src/main.js":
- (() => {
- eval("console.log('maomin2');");
- })
- });
- var __webpack_exports__ = {};
- __webpack_modules__["./src/main.js"]();
- })()
- ;
發(fā)現(xiàn)，我們打包成功了。這里我們只是實(shí)現(xiàn)了最基礎(chǔ)的字符串替換打包功能，webpack還有很多值得玩的特性。
網(wǎng)站名稱：今天，我們來實(shí)現(xiàn)一個基礎(chǔ)版的Webpack
本文地址：http://www.dlmjj.cn/article/dhsccgo.html
