什么是webpack?如何在项目中安装配置webpack?

webpack 是前端项目工程化的具体解决方案。 它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。目前企业级的前端项目开发中,绝大多数的项目都是基于 webpack 进行打包构建的。

在项目中安装webpack,需要先在终端运行如下的命令,安装 webpack 相关的两个包:

bash 复制代码
npm install webpack@5.5.1 webpack-cli04.2.0 -D

在项目中配置 webpack

① 在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置:

bash 复制代码
module.exports ={
   mode:'development'// mode用来指定构建模式。可选值有 development和 production
}

② 在 package.json 的 scripts 节点下,新增 dev 脚本如下:

bash 复制代码
"scripts":{
   "dev":"webpack"// script 节点下的脚本,可以通过 npm run 执行。例如 npm run dev
}

③ 在终端中运行 npm run dev 命令,启动 webpack 进行项目的打包构建。

相关推荐
啃火龙果的兔子1 天前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...1 天前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪1 天前
函数组件和异步组件
前端·javascript·面试
淮北4941 天前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友1 天前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei1 天前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发
顾三殇1 天前
【Node】win 10 / win 11:node.js 长期维护版下载、安装与 npm 配置
node.js·编译工具
黄毛火烧雪下1 天前
高效的项目构建和优化之前端构建工具
前端
90后的晨仔1 天前
在 macOS 上轻松获取 GIF 图片总时长:多种实用方法详解
前端
技术钱1 天前
vue3前端解析excel文件
前端·vue.js·excel