webpack,一个优秀的打包的工具

本文详细介绍了webpack,一个静态模块打包工具,用于处理前端项目的模块化。它能将多个.js文件打包成一个加密、压缩的安全文件。通过npx webpack命令进行打包,并通过webpack.config.js配置入口和出口。文中还展示了如何创建配置文件、设置入口和出口,以及实际的打包操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、什么是?

        webpack是一个静态模块打包器

2、作用

        ①有效处理模块化。默认情况下,浏览器并不支持模块化,而我们的前端项目又使用了模块化,有了webpack之后,就可以突破这个限制了。(翻译(降级,es6/7 ----> es5))

        ②webpack可以把多个相互引用的.js文件打包成一个文件,且文件有加密,压缩的效果,上线更安全。

3、使用

准备工作:

        任意新建一个空文件夹,取名为webFile,进入到文件夹内部,用 npm init --yes 命令来生成一个package.json,请看截图展示:

3.1、安装:

        webpack是一个工具,对于所有的项目都可以来使用,从这个意义上来讲,它是可以去全局安装的,但是,考虑到不同的项目中可能使用了不同的webpack版本,所以不推荐大家去全局安装。特别是打开一个老项目时,一定要注意一下它的webpack的版本号。

//1、先安装webpack
    npm i webpack

//2、再安装webpack-cli
    npm i webpack webpack-cli -D      

截图展示: 

 使用   npx webpack -v  检测安装是否成功

注意:

  • 由于webpack并不是全局安装的,所以并不能直接使用webpack -v来做检验。

  • npx是npm5.2之后提供的新功能。可以通过npx -v来检测它的版本。 在这里,我们通过它来调用项目安装的模块,它在运行时会在node_modules/.bin中去检查命令是否存在。

3.2、webpack的配置文件

webpack工作流程了解:

1、创建并使用默认配置文件 

        由于安装webpack后,没有自动帮我们创建webpack配置文件,需要我们手动新建,在项目根目录下创建一个名为 webpack.config.js  ,内容如下:

module.exports = {
  mode: 'development', // 打包方式
}

截图展示:

        这个文件的意义是导出一个配置项:用来对webpack的打包行为做设置。在操作层面,就是清楚如何去使用这个文件。

2、设置入口和出口

        入口文件: 指定了webpack从哪个文件开始工作。在它的内部会引入其他的模块,这样在打包时就会「顺藤摸瓜」也将其他的文件打包进来。

        出口文件:指定了最后打包之后的文件,重点是这个文件的具体位置。

        在webpack中,默认的入口和出口分别是:

  • 默认入口是:./src/index.js
  • 默认出口是:./dist/main.js。

        也就是说,如果直接在根目录下运行webpack,它会直接去找.src下的index.js,并把打包之后的代码放在dist/main.js下。

现在,我在这里有个文件目录结构,如下图:

项目名
├── index.html
├── src
│   └── js
│       ├── main.js
│       └── tool.js
├── webpack.config.js  # webpack的配置文件
└── package.json

tool.js文件内容如下:

export let printText = function (id, txt) {
  document.querySelector(id).innerHTML = txt;
};

main.js文件内容如下:

import { printText } from "./tool";
printText("#one", "123输出的文本");

index.html文件内容如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="one"></div>
  </body>
</html>

现在,对main.js文件进行打包,

先在配置文件里面添加命令:

打包命令:

基础打包命令:npx webpack 文件名

指定配置文件打包命令: npx webpack --config ./webpack.config.js

在package.json文件里,我们在script标签里可以加一句代码便可以通过npm run dev快速进行打包

代码为:"dev": "webpack --config webpack.config.js",

在这里,由于我们已经配置了入口文件,我们只需要输入npx webpack命令进行打包,见下图: 

此时会多出一个dev的文件夹,里面有一个index.js文件,这个文件是将所有的js文件打包为一个js文件,引入index.html即可

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值