极品简介webpack 是什么

Posted 2022-12-11 哈比老乌龟

什么是webpack

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)

webpack的基本安装指令

npm init
npm i webpack webpack-cli -g 全局安装
npm i webpack webpack-cli -D 安装到开发中,开发依赖

webpack可以做的事情
代码转换,文件优化,代码分割,模块合并,自动刷新,代码校验,自动发布

webpack的五大核心
1.Entry----入口,入口在哪里
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图

2.Output—输出口,输出口在哪
输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

3.Loader-----翻译官,翻译成为webpack能处理的文件
Loader 让 webpack 能 够 去 处 理 那 些 非 javascript 文 件 (webpack 自 身 只 理 解
JavaScript)

4. Plugins-----打包优化,工作组件.
   插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
   一直到重新定义环境中的变量等。

5. Mode-----模式(Mode)指示 webpack 使用相应模式的配置。
   development 能让代码本地调试运行的环境
   production 能让代码优化上线运行的环境