webpack的使用

一、Webpack

Webpack 是一个前端资源加载/打包工具(模块打包机)。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

如图下，Webpack 可以将多种静态资源css文件、图片资源、js文件等进行整合，转换成统一的js、css、jpg、png文件，减少了页面的请求。

webpack的优点

背景

如今我们的网页功能丰富，它们拥有着复杂的JavaScript代码和一大堆依赖包。开发者为简化开发的复杂繁琐的过程，对程序进行以下处理：

• 模块化，让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
• scss，less等CSS预处理器

webpack对文件进行处理分类打包，简化了复杂的手续，大大的提高了我们的开发效率。

二、Webpack的配置

• 创建文件夹myWebpack
• 初始化node.js
  • npm init -y
• 安装webpack模块
  • npm i webpack webpack-cli --save-dev
• 创建dist和src文件夹
• 模块安装好了，就可以进行打包，可以生成一个main.js文件