webpack-小滴课堂学习笔记
1.webpack是什么
简介：webpack其实就是一个JavaScript应用程序的静态模块打包器。
2.webpack有什么作用
模块化打包：webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系，webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，最后将应用程序需要的每个模块打包成一个或者多个bundle。
Webpack环境配置和简单打包
1.安装node
node官网地址: https://nodejs.org/zh-cn/
2.创建package.json文件
命令：npm init
3.安装webpack
本地安装：（推荐）
npm install --save-dev webpack webpack-cli
yarn add --dev webpack webpack-cli
全局安装：
npm install --global webpack webpack-cli
4.打包
默认entry入口 src/main.js
默认output出口 dist/main.js
打包模式：
webpack --mode development
webpack --mode production
Package.json文件下添加scripts：
设置好后在命令行程序中运行npm run dev或者npm run build来进行打包。
配置webpack.config.js
1.新建一个webpack.config.js
2.配置入口entry(所需打包的文件路径)
3.配置出口output
（1）path指文件打包后的存放路径
（2）path.resolve()方法将路径或路径片段的序列处理成绝对路径
（3）__dirname 表示当前文件所在的目录的绝对路径
（4）filename是打包后文件的名称
4.命令行程序运行npm run dev或者npm run build
入口entry和出口output进阶用法
1.入口entry
（1）单入口
例如： entry：‘./src/index.js’
（2）多入口
2.出口
（1）单出口
（2）多出口
[name] 原文件的名字
配置webopack-dev-server
1.了解webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack主要提供两个功能：
（1）为静态文件提供服务。把webpack打包生成的资源文件，部署到本地服务器。
（2）自动刷新和热替换（HMR）。
2.安装webpack-dev-server
yarn add --dev webpack-dev-server
3.配置webpack.config.js文件
4.配置package.json
"scripts": {
"start": "webpack-dev-server --mode development"
}
5.在build文件夹下新建index.html文件，在html中引入bundle.js
6.在命令行程序运行npm run start
自动弹出页面，控制台有输出信息
加载css所需loader及其使用方法
1.了解loader
loader让wepack能够去处理那些非javascript文件（webpack 自身只理解 JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。
2.安装loader
安装style-loader和css-loader
yarn add --dev style-loader css-loader
3.配置loader
在webpack.config.js文件里配置module中的rules
在 webpack 的配置中 loader 有两个目标：
-
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
-
use 属性，表示进行转换时，应该使用哪个 loader。
代码：
4.创建css文件并运行命令
创建index.css文件并import进index.js文件中
5.编译less
（1）处理效果
（2）安装loader
yarn add less-loader less --dev
（3）配置loader
6.编译sass
（1）处理效果
（2）安装loader
yarn add sass-loader node-sass --dev
（3）配置loader
7.使用postcss处理浏览器前缀
（1）处理效果
（2）安装loader
安装postcss-loader和autoprefixer
yarn add --dev postcss-loader autoprefixer
（3）配置loader
需要和autoprefixer一起用
或者在package.json里加上下图设置：
文件处理
1.图片处理
（1）安装loader
下载安装file-loader: yarn add --dev file-loader
(2)配置config文件
（3）选项配置
配置options：
name：为你的文件配置自定义文件名模板（默认值[hash].[ext]）
context：配置自定义文件的上下文，默认为 webpack.config.js
publicPath：为你的文件配置自定义 public 发布目录
outputPath：为你的文件配置自定义 output 输出目录
2.字体文件处理
（1）下载字体文件
以bootstrap字体文件为例子，Boostrap字体文件下载地址：https://v3.bootcss.com/getting-started/
（2）在index.js中引入bootstrap.css，在html中使用bootstrap字体图标
（3）配置config文件
3.第三方js库处理
以jquery库为例子
（1）本地导入
编写配置文件：
webpack.ProvidePlugin参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着设置的路径一直找下去。
使用webpack.ProvidePlugin前需要引入webpack
（2）npm安装模块
安装jquery库：yarn add --dev jquery
直接在js里import引入: import $ from 'jquery'
编译ES6
(1) 了解babel
目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具。
babel转化语法所需依赖项：
babel-loader: 负责es6语法转化
babel-core: babel核心包
babel-preset-env: 告诉babel使用哪种转码规则进行文件处理
(2) 安装依赖
yarn add --dev babel-loader @babel/core @babel/preset-env
(3) 配置config文件
exclude表示不在指定目录查找相关文件
(4) 根目录新建 .babelrc 文件配置转换规则
(5) 另一种规则配置
使用html-webpack-plugin生成html
1.了解html-webpack-plugin
HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。
根据src下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里。
2.生成依赖
yarn add html-webpack-plugin --dev
3.配置config文件
提起分离css
1.处理效果
将所有的入口 chunk(entry chunks)中引用的 css，移动到独立分离的 CSS 文件
2.mini-css-extract-plugin插件
（1）安装（下载）
（2）配置config文件
引入插件：
rules设置：
Plugins设置：
