分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

webpack的安装

发布时间:2023-09-06 02:27责任编辑:傅花花关键词:webpack

1、新建文件夹,英文,不要整中文。按住shift右键打开Powershell这个窗口。输入命令:npm init -y 初始化

2、输入npm i webpack webpack-cli -D安装webpack。(或者输入npm i webpack -D  再次输入 npm i webpack-cli -D)

3、手动建立webpack.config.js

核心概念

  • Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
  • Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。(在产出的HTML文件里引入哪些代码块)
  • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
  • Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
  • Output:输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果。

2 webpack的工作流程

1、 Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。

2 每找到一个 Module, 就会根据配置的Loader去找出对应的转换规则,对 Module 进行转换后,再解析出当前 Module 依赖的 Module。

3 这些模块会以 Entry 为单位进行分组,一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。

4 最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

webpack的安装

原文地址:https://www.cnblogs.com/Allisson/p/10192828.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved