欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack入门教程(webpack入门知识详细介绍)

程序员文章站 2023-11-21 11:52:16
前言本质上,webpack 是一个现代 javascript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(depende...
webpack入门教程(webpack入门知识详细介绍)

前言

本质上,webpack 是一个现代 javascript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

这是官网对webpack的解释。提到模块,模块顾名思义是独立的js文件。与之相近的词模块化,通俗地讲就是我们平时组织和管理代码方法的一种实现。

战前准备

我们先来测试一下webpack的打包。

1.初始化

创建项目目录

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 

创建入口文件

1.创建项目主目录

mkdir src 

2.创建入口文件

touch main.js 

3.编辑入口文件

我们这里使用最简单的一行代码。

console.log('maomin1'); 

创建编辑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'
  }
} 

运行测试打包

我们这里使用 npx webpack 命令进行打包。打包成功!

我们来到打包好的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');nn//# 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');nn//# sourceurl=webpack://webpackmini/./src/main.js?");})
  });
   var __webpack_exports__ = {};
  __webpack_modules__["./src/main.js"]();
})(); 

准备实战

开始实战实现一个基础版的webpack。

1.首先我们在项目根目录下创建一个文件夹。

mkdir maominpack 

2.然后,在maominpack文件夹下创建一个bin文件夹

mkdir bin 

3.最后在bin文件夹下创建一个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); 

首先,我们在头部指定环境为node环境,并且引入fs模块。然后,我们引入了ejs依赖,如果不是很了解ejs的,可以去官网浏览下。这里就简单的介绍一下。

  • “e” 代表什么?可以表示 “可嵌入(embedded)”,也可以是“高效(effective)”、“优雅(elegant)”或者是“简单(easy)”。ejs 是一套简单的模板语言,帮你利用普通的 javascript 代码生成 html 页面。ejs 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 javascript 代码而已。

我们看到在将带有绑定值的字符串赋值给template变量,我们这里使用的ejs.render(),第一个参数是需要处理的字符串,第二个参数使我们需要修改的值,是一个对象。

4.在package.json文件下编辑如下:

{   
  "name": "maominpack", 
  "version": "1.0.0",
    "bin":{     "maominpack":"bin/maominpack.js"   }, 
      "main": "index.js",   "license": "mit" 
} 

5.为其命令创建快捷方式

npm link  

6.为其配置在其他目录也可使用此命令

npm config ls 

7.验证打包

我们将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"]();
})() 
; 

发现,我们打包成功了。这里我们只是实现了最基础的字符串替换打包功能,webpack还有很多值得玩的特性。