基础知识重新学习，若有不对欢迎指正，感恩。

什么是webpack？

将一个项目js、css、img、font等各种模块打包的模块打包器。

为什么需要webpack？

当我们写好代码后还需要做如下事情，才能将代码上传到服务器上供用户使用。

转换es6代码
打包所有asset资源
转换jsx语法
css补全前缀、预处理器编译
代码压缩
图片压缩

webpack就是这样一个工具，可以在写完整个项目后，不再需要手动一步一步做以上工作，彻底提升效率。

如何使用webpack？

环境搭建

node.js环境和npm包管理

初始化项目

npm init -y

安装webpack

npm install webpack webpack-cli --save-dev

初始化配置webpack

package.json

含义：

新增一个运行webpack命令的脚本serve

根目录新建webpack.config.js--wenback默认的配置文件

/src目录新建index.js

运行脚本npm run serve

会在/dist下得到一个webpack打包后的index.js文件。

核心概念

1.entry

打包的入口参数，接受三种形式的值(字符串、数组、键值对)

字符串形式仅支持单入口，如需多入口就需要使用数组和键值对形式。

2.output

打包完成后的输出出口

主要参数包括：

path：输出文件夹路径
filename：输出文件名（[name]表示使用输入文件名表示）

3.loader

由于webpack只支持js文件，故需要loader来将非js文件（css、font、img）转换成webpack能识别的模块。然后添加到依赖图中。loader本身是一个函数，接受一个文件，返回转化结果。

常用模块

主要参数：

test：正则匹配对应文件
use：使用何种loader及其配置项

plugins

处理bundle（打包后文件）的优化、资源管理、环境变量注入的工作。比如压缩css文件、形成雪碧图。作用于整个构建过程。

常见的plugins

主要参数：

plugins：用来接受插件的数组

mode

用来指定当前环境开发环境、生产环境。

主要参数：

mode：production（默认）、devlopment、none

通过process.env.NODE.env来判断当前环境用来操作不同webpack步骤。

loader的使用

ES6、jsx解析

安装babel、babel-loader、react、react-dom

npm i @babel/core @babel/preset-env @babel/preset-react babel-loader react react-dom -D

根目录新建.babelrc

修改package.json，添加babel-loader

修改 ./src/index.js代码，加入ES6特性。

新建./src/search.js，加入jsx代码。

npm run serve

在./dist下新建index.html,引入index.js和search.js

会发现 babel将ES6代码转化成ES5代码,将jsx代码转化成js

css-lodaer&less-loader的使用

安装less、css-loader、less-loader

npm i less css-loader less-loader -D

修改package.json，添加css-loader和less-loader。

less/css loader的顺序是use数组的逆序，即先将less加载成css文件，再将css 加载成style，再将style插入head标签中。

新增search.css和search.less，填写样式，在jsx中引入。npm run serve

图片和字体-file-loader的使用

安装file-loader

npm i file-loader -D

修改package.json，添加file-loader。

在/src中添加字体文件和图片然后在search.js这个jsx中引入图片，search.less中引入字体。

search.less

search.js

最后效果：

url-loader的使用

安装url-loader

npm i url-loader -D

修改package.json，添加url-loader。

url-loader也可以加载img和font，还可以通过设置，将小图片直接转成base64。