自动化构建工具——2.webpack简介

一、webpack简介

1.1 webpack 是什么 ？

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。

它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

• 资源构建工具：就是将前端一系列需要做的小操作整合成一个大的工具，他一次性能干完，这样的工具就叫构建工具，Webpack就是构建工具中的一种。

• 静态模块打包器：

  • 很多要引入的资源都要交给构建工具去处理，而我们首先要告诉Webpack一个打包的起点，就是所谓的入口文件，Webpack就会以这个入口文件作为起点去打包；
  • 比如说在此实例中，index.js就是入口文件，它将每一个依赖都给记录好，形成一个依赖关系树状结构图，形成好之后分别通过依赖关系图先后顺序依次把资源给引进来，引进来形成一个chunk（代码块）；
  • 然后再对代码块进行各项处理（比如.less->.css .js->浏览器能识别的.js,这样的操作统一概括为打包)，打包好之后让这些处理好的资源输出出去，输出的东西叫bundle。

1. 创建项目结构

|-01.webpack简介
  |-node_modules
  |-index.html
  |-index.less
	|-index.js
	|-package-lock.json
	|-pac