Node.js之妙用webpack

顾伊
612 阅读5分钟

webpack-概念

场景

开发完项目, 可以用node+webpack来分析, 翻译, 压缩, 打包, ==加快浏览器打开速度==

概念

webpack官网

  • 现代 javascript 应用程序的 静态模块打包器 (module bundler)

    • 静态: 文件资源
    • 模块: node环境, 引入文件, 遵守模块化语法

  • 除了合并代码, 还可以翻译和压缩代码

    • less/sass -> css

    • ES6/7/8 -> ES5

    • html/css/js -> 压缩合并

webpack-使用前-准备

软件

webpack依赖Node环境

npm或yarn等模块管理工具

步骤

  1. 创建Day01_webpack基础使用文件夹
  2. 初始化包环境
yarn init

  1. 安装依赖包

    为何指定版本: 防止以后包更新, 造成课程内容报错

yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
  1. 在package.json中, 配置scripts(自定义命令)
scripts: {
    "build": "webpack"
}

webpack-基础使用

步骤

  1. 新建src/add/add.js - 定义求和函数导出
export const addFn = (a, b) => a + b
  1. 新建src/index.js导入使用
// webpack打包的入口
import { addFn } from './add/add'
console.log(addFn(5, 2));
  1. 运行打包命令
yarn build

效果

  1. src并列处, 生成dist目录和main.js文件
  2. 查看main.js文件, 是打包压缩后的代码
(()=>{"use strict";console.log(7)})();

webpack-更新打包

  1. 新建src/tool/tool.js - 导出数组求和方法
export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)
  1. 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]));
  1. 重新打包
yarn build

效果

  1. 自动覆盖原dist, 结果压缩极致
(()=>{"use strict";console.log(7),console.log([5,6,9,10].reduce(((o,e)=>o+e),0))})();

webpack-配置修改

步骤

配置文档

  1. 项目根目录 - 新建webpack.config.js文件 (默认配置文件名)
  2. 填入配置项
const path = require("path")

module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}
  1. 修改代码里src/index.js 为 src/main.js
  2. 重新打包观察输出文件名字

webpack-打包流程图

  1. 敲击命令, 代码执行过程

  2. 代码源文件和webpack之间关系图

    源码一定要和入口产生直接/间接引入关系, 才会被一起打包

QQ截图20220707202805.png

webpack-案例-发送ajax

步骤

  1. 回顾从0准备环境

    • 初始化包环境
    • 下载依赖包
    • 配置自定义打包命令

  2. 下载jquery

yarn add axios
  1. 新建public/index.html - 前端首页
  2. 新建src/main.js - webpack打包入口
  3. index.html 准备一些li
<!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>

    <button>按钮</button>

</body>
</html>
  1. 在src/main.js引入jquery
import axios from 'axios'
  1. main.js中编写, 隔行变色代码
document.querySelector("button").onclick = function() {
    axios({
        url: 'http://www.liulongbin.top:3009/api/getbooks'
    }).then(({data:res}) => {
        console.log(res);
    });
}
  1. 执行打包命令
yarn build

  1. 把public/index.html手动复制到dist下

  2. 再手动引入打包后bundle.js

<script src="../dist/bundle.js"></script>

关键

  1. yarn下的包, 在js文件里, 用import语法导入

    浏览器不支持import语法

  2. webpack翻译打包后输出到bundle.js

  3. html页面引入翻译打包后的js即可正常使用

webpack-插件-自动生成html文件

步骤

html-webpack-plugin插件文档

  1. 下载插件

    yarn add html-webpack-plugin@5.3.1  -D

  2. webpack.config.js配置

    // 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 
​
module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html' 
        })
    ]
}

  3. 重新打包后观察dist下

    • 自动生成html文件
    • 自动引入打包后js文件

总结: webpack就像一个人, webpack.config.js是人物属性, 给它穿什么装备它就干什么活

webpack-加载器-处理css文件问题

步骤

1.新建 - src/css/index.css

2.编写去除li圆点样式代码

button {
    width: 200px;
    height: 50px;
}

3.==在main.js引入index.css==

一定要引入到入口才会被webpack打包

import "./css/index.css"

4.执行打包命令观察效果

错误解释: 你可能需要一个loader来支持这种类型文件, 解析css代码

原因: webpack默认只识别js文件

webpack-加载器-处理css文件

步骤

style-loader文档

css-loader文档

  1. 安装依赖

    需要这2个模块包, 帮助webpack打包css

    yarn add css-loader@5.2.1 style-loader@2.0.0  -D

  2. webpack.config.js 配置

    module.exports = {
    // ...其他代码
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
          {
            test: /.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

  3. 执行打包命令, 观察打包后dist下

效果

  1. css代码被打包进了dist/bundle.js中
  2. 运行时, css代码插入到html的style标签中

webpack-加载器-处理less文件

步骤

less-loader文档

  1. 新建src/less/index.less - 设置li字体大小24px
@size:24px;
​
body {
    button {
        font-size: @size;
    }
}
  1. 引入到main.js中
import "./less/index.less"
  1. 下载依赖包
yarn add less@4.1.1 less-loader@8.1.0 -D
  1. webpack.config.js 配置
module: {
  rules: [ 
    // ...省略其他
    {
        test: /.less$/, // 匹配.less结尾文件
        // 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

总结: 只要找到对应的loader加载器, 就能让webpack处理不同类型文件

webpack-加载器-处理图片文件

步骤

  1. 素材文件夹/2个图文件
  2. 在css/less/index.less - 把小图片用做背景图
body{
    background: url(../assets/logo_small.png) no-repeat center;
}
  1. 在src/main.js - 把大图插入到创建的img标签上, 添加body上显示
// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

配置

webpack5内置处理方案, 只需要填入配置即可

asset module资源模块文档

  1. webpack.config.js填写
module: {
    rules: [ 
        // ...省略其他
        {
            test: /.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
        }
    ]
}
​
  1. 打包后运行dist/index.html观察区别

webpack-加载器-图片处理区别

配置

  1. asset模块区分
module: {
    rules: [ 
        // ...省略其他
        {
            test: /.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
            // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
            // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
        }
    ]
}
​

webpack-加载器-处理字体文件

步骤

  1. 素材文件夹/字体库fonts文件夹
  2. 在main.js引入iconfont.css
// 引入字体图标文件
import './assets/fonts/iconfont.css'
  1. 在public/index.html使用字体图标样式
<i class="iconfont icon-weixin"></i>

配置

webpack5, 用asset module技术

webpack.config.js

{ 
    test: /.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',  // 当做静态资源直接复制文件
    generator: {
        filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
    }
}

webpack-加载器-处理高版本js语法

介绍

babel编译器=> 用于处理高版本 js语法 的兼容性 babel官网

webpack配合babel-loader 对js语法做处理 babel-loader文档

步骤

  1. src/main.js - 编写箭头函数
const fn = () => { // 高级语法
  console.log("你好babel");
}
console.log(fn) // 一定打印函数, 才会被webpack把"函数体"打包起来
  1. 安装包
yarn add -D babel-loader@8.2.2 @babel/core@7.13.15 @babel/preset-env@7.13.15
  1. webpack.config.js 配置规则
module: {
    rules: [
        {
            test: /.js$/, // 匹配js结尾文件
            exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
            use: { 
                loader: 'babel-loader', // 使用加载器-处理
                options: {
                    presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }
    ]
}
  1. 打包后观察dist/的js文件, 自动变成普通函数 最后是原图

wallhaven-g7e7v7.jpg

avatar
文章
阅读
粉丝