Webpack 初识

1.简介

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

官网地址：https://webpack.docschina.org/

从上图可以看出，Webpack可以将多种静态资源js，css，less转换为一个静态文件，减少页面请求。

2.主要配置介绍

本质上，webpack是一个用于现代javascript应用程序的静态模块打包工具。当webpack处理应用程序时，他会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个budles，他们均为静态资源，用于展示你的内容。

• 入口（entry）
• 输出（output）
• loader
• 插件（plugin）
• 模式（mode）
• 浏览器兼容性（brower compatibility）
• 环境（environment）
  入口：指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。默认值是./src/index.js，可以在webpack.config.js中配置。
  输出：告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件，默认值是./dist/main.js。
  loader：让webpack能处理一些其他文件，将他们转化为有效模块，以供程序使用。
  插件：打包优化，资源管理，注入环境变量。
  模式：development，production或者none