webpack 定义
- webpack：基于NODE.JS的，是一个打包工具（官网解释）
- 从广义上来讲，你可以理解为一个项目的优化工具
- 是为我们项目服务的一个工具
- 项目是由 前端、后端、数据库、服务器 构成的
webpack 作用
- 优化
- 工程化。vue、react 都有自己的脚手架，脚手架均是基于 webpack
- 打包
- 将多个文件进行压缩
- 打包成一个文件，在对其进行访问的时候只抓取一次就可以了。
- 这是它的而主要功能，为什么要压缩项目？因为在云服务器上带宽最贵，要尽量少占用
- 是对项目内容的操作，不是打包成压缩文件 rar 、zip 那种
- 转换
- es6、ts、jsx、less、sass 浏览器当中默认是不支持的（浏览器 es6 支持绝大部分）
- 它的功能就是转换成 浏览器 支持的
webpack 经常使用到的功能一、 通过webpack对公司现有的项目进行从0开始的搭建
- 通过 webpack 重新创建一个项目，在这个项目里面它可以帮助我们实现一系列的工程化，
- 可以实现 热更新、语言的转化、文件的打包
在 vue 、react 中的脚手架中已经将 webpack 已经写在非常清楚了，为什么还要再次搭建 webpack？可以摒弃一些 vue、 react 脚手架当中的 冗余 的代码
二、 对vue,react脚手架进行添加与修改的操作
webpack 结构
- 入口：entry
- 出口：output
- 插件：plugins
- 服务器设置：devServer
- 转换：loades
- module
- 模式：mode
- 开发环境（development）：敲打代码的位置，打完包以后你的代码并没有给你压缩。
- 生产环境（production）：打完包以后放置到服务器上所属的环境。
- 转载请标明出处
推荐阅读
- 自动化构建工具（二）（特性）
- 区块链|理解以太坊DApp及开发工具
- webpack打包原理
- 动态引入（require, import）
- javascript|react使用笔记及生命周期
- webpack构建原理（实现一个简易的webpack构建器）
- webpack 构建 npm 包优化
- gulp|如何进行清除web端缓存
- 自动化构建工具篇|【解决方案】webpack `Invalid Host/Origin header`问题