为了让网页加载的更快，需要缩小网站代码的体积。
静态模块打包工具，作用是分析、压缩、打包代码。
webpack-study
cmd，切换当前路径到webpack-study
npm init -y直接生成配置文件package.json
npm install webpack webpack-cli -D
package.json节点scripts添加build配置npm run build就会执行webpack打包
src/add/add.js定义求和函数导出export const addFn = (a, b) => a + b
src/index.js导入使用// webpack打包的入口
import { addFn } from './add/add'
console.log(addFn(5, 2));
npm run build
在src并列处, 生成dist目录和main.js文件
查看main.js文件, 是打包压缩后的代码
(()=>{"use strict";console.log(7)})();
**需求：**代码变化后再更新打包
步骤
src/tool/tool.js导出数组求和方法export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)
src/index.js导入使用import { addFn } from './add/add'
import { getArrSum } from './tool/tool'
console.log(addFn(5, 2));
console.log(getArrSum([5, 6, 9, 10]));
npm run build
(()=>{"use strict";console.log(7),console.log([5,6,9,10].reduce(((o,e)=>o+e),0))})();
概要：
src/index.js，默认的出口: dist/main.js。webpack.config.js配置文件。步骤
webpack-config
webpack-study案例的文件复制一份进来webpack.config.js文件 (默认配置文件名)const path = require("path")
module.exports = {
entry: "./src/main.js", // 入口：可以是相对路径
output: {
path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
filename: "bundle.js" // 出口"文件"名
}
}
重命名文件src/index.js 为 src/main.js
运行打包命令npm run build
dist目录生成bundle.js文件
入口产生直接/间接引入关系, 才会被一起打包
**概要：**引入jquery，实现隔行变色
步骤：
创建项目文件夹webpack-jquery
webpack-config案例的文件复制一份进来
安装jquery包npm install jquery
新建前端首页public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- ul>li{我是第$个li}*10 -->
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
</ul>
</div>
</body>
</html>
src/main.js文件import $ from 'jquery'
$(function() {
$('#app li:nth-child(odd)').css('color', 'red')
$('#app li:nth-child(even)').css('color', 'green')
})
运行打包命令npm run build
把public/index.html文件手动复制到dist/index.html，在dist/index.html中手动引入打包后的bundle.js
<script src="../dist/bundle.js"></script>
效果：
概要：
html-webpack-plugin可以帮助我们将html文件打包。步骤：
webpack-htmlplugin
webpack-jquery案例的文件复制一份进来html-webpack-plugin
npm install html-webpack-plugin -D
webpack.config.js配置文件const path = require("path")
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/main.js", // 入口：可以是相对路径
output: {
path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
filename: "bundle.js" // 出口"文件"名
},
plugins: [
// html 插件
new HtmlWebpackPlugin({
// 指定要复制的HTML文件位置
// 可以使用相对路径
// 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
// defer: 等页面资源加载完成后加载js文件
template: './public/index.html'
})
]
}
npm run build
**效果：**和上面隔行变色手动复制一样
概要：
css-loader：让webpack能够识别css文件的内容style-loader：把css插入到dom中css-loader配置文档：https://webpack.docschina.org/loaders/css-loader/
style-loader配置文档：https://webpack.docschina.org/loaders/style-loader/
步骤：
webpack-css
webpack-htmlplugin案例的文件复制一份进来css-loader，style-loader
npm install css-loader style-loader -D
webpack.config.js配置文件const path = require("path")
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/main.js", // 入口：可以是相对路径
output: {
path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
filename: "bundle.js" // 出口"文件"名
},
plugins: [
// html 插件
new HtmlWebpackPlugin({
// 指定要复制的HTML文件位置
// 可以使用相对路径
// 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
// defer: 等页面资源加载完成后加载js文件
template: './public/index.html'
})
],
module: { // 如何处理项目中不同模块文件
rules: [ // 规则
{
// . 表示除换行符以外的任意字符
// \ 转义符
test: /\.css$/, // 匹配所有的css文件
// loader的加载顺序是从右往左
// 先用css-loader让webpack能够识别css文件并打包
// 再用style-loader将样式插入到dom中
use: ["style-loader", "css-loader"]
}
]
}
}
src/css/index.css，填上样式去除li圆点样式li{
list-style: none;
}
main.js引入index.css，一定要引入到入口才会被webpack打包import "./css/index.css"
npm run build
**效果：**实现去除li圆点样式
概要：
less-loader：让webpack识别处理less文件less：翻译less代码成css代码less-loader配置文档：https://webpack.docschina.org/loaders/less-loader/
步骤：
webpack-less
webpack-css案例的文件复制一份进来less-loader，less
npm install less less-loader -D
webpack.config.js配置文件const path = require("path")
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/main.js", // 入口：可以是相对路径
output: {
path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
filename: "bundle.js" // 出口"文件"名
},
plugins: [
// html 插件
new HtmlWebpackPlugin({
// 指定要复制的HTML文件位置
// 可以使用相对路径
// 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
// defer: 等页面资源加载完成后加载js文件
template: './public/index.html'
})
],
module: { // 如何处理项目中不同模块文件
rules: [ // 规则
{
// . 表示除换行符以外的任意字符
// \ 转义符
test: /\.css$/, // 匹配所有的css文件
// loader的加载顺序是从右往左
// 先用css-loader让webpack能够识别css文件并打包
// 再用style-loader将样式插入到dom中
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/, // 匹配.less结尾文件
// 使用less-loader让webpack能够识别less文件
// 内置还会用less模块, 翻译less代码成css代码
// 然后再打包CSS文件，并将样式插入到dom中
use: ["style-loader", "css-loader", 'less-loader']
}
]
}
}
src/less/index.less，设置li字体大小24px@size:24px;
ul, li{
font-size: @size
}
main.js中import "./less/index.less"
npm run build
**效果：**字体设置成需求大小
概要：
步骤：
创建项目文件夹webpack-pic
webpack-less案例的文件复制一份进来
src文件夹下创建assets文件夹，放入两张图片
在css/less/index.less设置body背景图片
body{
background: url(../assets/logo_small.png) no-repeat center;
}
5. 在src/main.js把图片添加body上显示
// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)
6. 修改webpack.config.js配置文件
const path = require("path")
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/main.js", // 入口：可以是相对路径
output: {
path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
filename: "bundle.js" // 出口"文件"名
},
plugins: [
// html 插件
new HtmlWebpackPlugin({
// 指定要复制的HTML文件位置
// 可以使用相对路径
// 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
// defer: 等页面资源加载完成后加载js文件
template: './public/index.html'
})
],
module: { // 如何处理项目中不同模块文件
rules: [ // 规则
{
// . 表示除换行符以外的任意字符
// \ 转义符
test: /\.css$/, // 匹配所有的css文件
// loader的加载顺序是从右往左
// 先用css-loader让webpack能够识别css文件并打包
// 再用style-loader将样式插入到dom中
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/, // 匹配.less结尾文件
// 使用less-loader让webpack能够识别less文件
// 内置还会用less模块, 翻译less代码成css代码
// 然后再打包CSS文件，并将样式插入到dom中
use: ["style-loader", "css-loader", 'less-loader']
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
// asset
// 大于 8KB 不转 base64 直接复制
// 小于 8KB 转成 base64 插入到 js 中
type: 'asset',
// generator 就是定义打包输出的规则
generator: {
// [] 的内容当做内置的变量
// [name] 表示原先的文件名
// [hash:6] 表示使用哈希字符串, 长度6
// [ext] 表示后缀名 带 .
filename: 'imgs/[name].[hash:4][ext]'
}
}
]
}
}
7. 执行打包命令npm run build
大于 8KB 不转 base64 直接复制
小于 8KB 转成 base64 插入到 js 中减少网络请求
增加30%的体积
**概要：**配置webpack，打包字体文件
步骤：
创建项目文件夹webpack-font
webpack-pic案例的文件复制一份进来
assets文件夹下创建fonts文件夹，放入字体文件
在main.js引入iconfont.css
// 引入字体图标文件
import './assets/fonts/iconfont.css'
5. 在`public/index.html`使用字体图标样式
<i class="iconfont icon-weixin"></i>
webpack.config.js配置文件const path = require("path")
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/main.js", // 入口：可以是相对路径
output: {
path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
filename: "bundle.js" // 出口"文件"名
},
plugins: [
// html 插件
new HtmlWebpackPlugin({
// 指定要复制的HTML文件位置
// 可以使用相对路径
// 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
// defer: 等页面资源加载完成后加载js文件
template: './public/index.html'
})
],
module: { // 如何处理项目中不同模块文件
rules: [ // 规则
{
// . 表示除换行符以外的任意字符
// \ 转义符
test: /\.css$/, // 匹配所有的css文件
// loader的加载顺序是从右往左
// 先用css-loader让webpack能够识别css文件并打包
// 再用style-loader将样式插入到dom中
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/, // 匹配.less结尾文件
// 使用less-loader让webpack能够识别less文件
// 内置还会用less模块, 翻译less代码成css代码
// 然后再打包CSS文件，并将样式插入到dom中
use: ["style-loader", "css-loader", 'less-loader']
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
// asset
// 大于 8KB 不转 base64 直接复制
// 小于 8KB 转成 base64 插入到 js 中
type: 'asset',
// generator 就是定义打包输出的规则
generator: {
// [] 的内容当做内置的变量
// [name] 表示原先的文件名
// [hash:6] 表示使用哈希字符串, 长度6
// [ext] 表示后缀名 带 .
filename: 'imgs/[name].[hash:4][ext]'
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/i, // 匹配字体文件
// asset/resource:不做base64转换, 无论多大多小都直接复制到出口
type: 'asset/resource',
generator: {
// [] 的内容当做内置的变量
// [name] 表示原先的文件名
// [hash:6] 表示使用哈希字符串, 长度6
// [ext] 表示后缀名 带 .
filename: 'fonts/[name].[hash:4][ext]'
}
}
]
}
}
7. 执行打包命令npm run build
效果：
概要：
让webpack用babel编译器处理高版本js语法降级成低版本js
babel官网：https://www.babeljs.cn/
babel-loader文档：https://webpack.docschina.org/loaders/babel-loader/
步骤：
webpack-es6
webpack-font案例的文件复制一份进来src/main.js编写箭头函数const fn = () => { // 高级语法
console.log("你好babel");
}
console.log(fn) // 一定打印函数, 才会被webpack把"函数体"打包起来
babel-loader，@babel/core，@babel/preset-env
npm install babel-loader @babel/core @babel/preset-env -D
webpack.config.js配置文件const path = require("path")
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/main.js", // 入口：可以是相对路径
output: {
path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
filename: "bundle.js" // 出口"文件"名
},
plugins: [
// html 插件
new HtmlWebpackPlugin({
// 指定要复制的HTML文件位置
// 可以使用相对路径
// 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
// defer: 等页面资源加载完成后加载js文件
template: './public/index.html'
})
],
module: { // 如何处理项目中不同模块文件
rules: [ // 规则
{
// . 表示除换行符以外的任意字符
// \ 转义符
test: /\.css$/, // 匹配所有的css文件
// loader的加载顺序是从右往左
// 先用css-loader让webpack能够识别css文件并打包
// 再用style-loader将样式插入到dom中
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/, // 匹配.less结尾文件
// 使用less-loader让webpack能够识别less文件
// 内置还会用less模块, 翻译less代码成css代码
// 然后再打包CSS文件，并将样式插入到dom中
use: ["style-loader", "css-loader", 'less-loader']
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
// asset
// 大于 8KB 不转 base64 直接复制
// 小于 8KB 转成 base64 插入到 js 中
type: 'asset',
// generator 就是定义打包输出的规则
generator: {
// [] 的内容当做内置的变量
// [name] 表示原先的文件名
// [hash:6] 表示使用哈希字符串, 长度6
// [ext] 表示后缀名 带 .
filename: 'imgs/[name].[hash:4][ext]'
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/i, // 匹配字体文件
// asset/resource:不做base64转换, 无论多大多小都直接复制到出口
type: 'asset/resource',
generator: {
// [] 的内容当做内置的变量
// [name] 表示原先的文件名
// [hash:6] 表示使用哈希字符串, 长度6
// [ext] 表示后缀名 带 .
filename: 'fonts/[name].[hash:4][ext]'
}
},
{
// 强烈不建议大家手写, 容易出错
test: /\.m?js$/, // 匹配js结尾文件
exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
use: {
loader: 'babel-loader', // 使用加载器处理
options: {
presets: ['@babel/preset-env'] // 预设转码规则(用bable开发环境)
}
}
}
]
}
}
npm run build
**效果：**打包后观察dist/bundle.js文件, 自动变成普通函数
概要：
步骤：
webpack-server
webpack-es6案例的文件复制一份进来webpack-dev-server
npm install webpack-dev-server -D
package.json配置文件scripts节点scripts: {
"build": "webpack",
"serve": "webpack serve"
}
webpack.config.js配置文件const path = require("path")
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/main.js", // 入口：可以是相对路径
output: {
path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
filename: "bundle.js" // 出口"文件"名
},
plugins: [
// html 插件
new HtmlWebpackPlugin({
// 指定要复制的HTML文件位置
// 可以使用相对路径
// 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
// defer: 等页面资源加载完成后加载js文件
template: './public/index.html'
})
],
module: { // 如何处理项目中不同模块文件
rules: [ // 规则
{
// . 表示除换行符以外的任意字符
// \ 转义符
test: /\.css$/, // 匹配所有的css文件
// loader的加载顺序是从右往左
// 先用css-loader让webpack能够识别css文件并打包
// 再用style-loader将样式插入到dom中
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/, // 匹配.less结尾文件
// 使用less-loader让webpack能够识别less文件
// 内置还会用less模块, 翻译less代码成css代码
// 然后再打包CSS文件，并将样式插入到dom中
use: ["style-loader", "css-loader", 'less-loader']
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
// asset
// 大于 8KB 不转 base64 直接复制
// 小于 8KB 转成 base64 插入到 js 中
type: 'asset',
// generator 就是定义打包输出的规则
generator: {
// [] 的内容当做内置的变量
// [name] 表示原先的文件名
// [hash:6] 表示使用哈希字符串, 长度6
// [ext] 表示后缀名 带 .
filename: 'imgs/[name].[hash:4][ext]'
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/i, // 匹配字体文件
// asset/resource:不做base64转换, 无论多大多小都直接复制到出口
type: 'asset/resource',
generator: {
// [] 的内容当做内置的变量
// [name] 表示原先的文件名
// [hash:6] 表示使用哈希字符串, 长度6
// [ext] 表示后缀名 带 .
filename: 'fonts/[name].[hash:4][ext]'
}
},
{
// 强烈不建议大家手写, 容易出错
test: /\.m?js$/, // 匹配js结尾文件
exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
use: {
loader: 'babel-loader', // 使用加载器处理
options: {
presets: ['@babel/preset-env'] // 预设转码规则(用bable开发环境)
}
}
}
]
},
//webpackserver配置
devServer: {
port: 3000, // 端口号
open: true // 自动打开浏览器
}
}
npm run serve启动webpack开发服务器**效果：**修改src/public文件夹下的代码，自动打包更新到浏览器效果
磁盘出口位置重复1~4步
内存里只重新打包变化的代码, 自动更新到页面npm run build，生成打包到dist文件夹const express = require('express')
const app = express()
app.use(express.static('./dist'))
app.listen(4005)
概要
如用的是webpack4版本, 尝试这里配置
当然webpack5是向下兼容的, 也可以使用
url-loader文档：https://webpack.docschina.org/loaders/url-loader/
file-loader文档：https://webpack.docschina.org/loaders/file-loader/
步骤
npm install url-loader file-loader -D
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: [
{
loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
options: { // 配置limit, 超过8k, 不转base64字符串, 自动用file-loader复制文件到dist下
limit: 8 * 1024,
}
}
]
}
{
// 处理字体图标的解析
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 2 * 1024,
// 配置输出的文件名
name: '[name].[ext]',
// 配置输出的文件目录
outputPath: "fonts/"
}
}
]
}
概要：
source map：用于在浏览器调试错误使用，记录代码打包前原始位置
问题: 看浏览器控制台报错信息，发现看不出哪行代码报错了
解决方案: 启用source map
步骤：
webpack.config.js - 配置
module.exports = {
// ...其他配置
// development开发模式,webpack内部不会使用内置优化, 不压缩代码
// production生产模式,会压缩代码
mode: 'development',
devtool: 'cheap-module-source-map', // cheap-module-source-map 开发模式下使用, 保证运行时的行数和源代码行数一致(默认不写是eval模式)
}
重新启动开发服务器/打包, 观察是否有错误代码打包前的位置信息了
devtool值说明
规则字符串列表:https://webpack.docschina.org/configuration/devtool/
格式: [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map (了解即可)
| 规则值 | 速度 | 位置 | 说明 |
|---|---|---|---|
| false |
建立：最快 重建：最快 |
无 | 不开启sourcemap(规则值写错也是这个) |
| inline |
建立：最慢 重建：最慢 |
内嵌 | 报错信息, 以及源码和源码位置信息 |
| hidden |
建立：最慢 重建：最慢 |
独立map文件 | 报错信息, 没有源码和源码位置信息 |
| eval |
建立：快 重建：最快 |
内嵌 | 报错信息, 以及源码 (mode为development时使用这个值) |
| cheap |
建立：固定 重建：慢 |
独立map文件 | 报错信息, 以及源码和源码的行数(没有列) |
| module |
建立：慢 重建：快速 |
与别的一起用 | 是否为loaders加载器生成source map |
| [xxx-…]source-map |
建立：最慢 重建：最慢 |
独立map文件 | 报错信息, 以及源码和源码位置信息 |
| nosource |
建立：最慢 重建：最慢 |
独立map文件 | 报错信息, 不显示源码 |
webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 webpack 提供的 API 改变 webpack 的运行结果
webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
HMR的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS(webpack-dev-server) 与浏览器之间维护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。
后续的部分(拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？)由 HotModulePlugin 来完成，提供了相关 API 以供开发者针对自身场景进行处理，像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。
三者之间的区别
三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。
grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。
webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。
**从构建思路来说：**gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系 webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工
**对于知识背景来说：**gulp更像后端开发者的思路，需要对于整个流程了如指掌 webpack更倾向于前端开发者的思路
file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码
不同的作用
loader直译为"加载器"。webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
不同的用法
Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）