极品简介webpack 是什么

原创于 2021-06-08 21:39:50 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

如何安装webpack 同时被 2 个专栏收录

1 篇文章

订阅专栏

什么是webpack

1 篇文章

订阅专栏

webpack是一个强大的前端构建工具，负责处理和打包JavaScript及其相关资源如CSS、图片等。它通过Entry确定入口，Output设置输出位置，Loader转换非JavaScript文件，Plugins执行广泛任务如优化和压缩，而Mode则定义开发或生产环境。安装webpack使用`npm init`、`npm install webpack webpack-cli -g`（全局）或`npm install webpack webpack-cli -D`（局部）。webpack能实现代码转换、优化、分割、合并、自动刷新、校验和发布等多种功能。

什么是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)

Plugins-----打包优化,工作组件.
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。
Mode-----模式(Mode)指示 webpack 使用相应模式的配置。
development 能让代码本地调试运行的环境
production 能让代码优化上线运行的环境