webpack (静态模块打包工具) 手记

2024-02-21 17:05:04

新建src 在下面创建 index.js (入口文件) 和 add.js
下载安装webpack (npm run build 或 yarn build), 配置打包命令 build : webpack
默认入口src/index.js-要被打包的文件, 要引入到这里使用
输入yarn build打包命令(实际是项目环境webpack命令)
输出代码到add/add.js中

修改入口与出口点

新建 webpack.config.js (注意路径)

//在里面添加
const path = require('path')

module.exports = {
  entry: './src/main.js', //入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), //出口文件
    filename: 'bundle.js', //出口文件名
  },
}

修改成功

隔行变色

下载jquery
npm add 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="myUL">
      <!-- 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 - webpack打包入口
index.html 准备一些li
在src/main.js引入jqueryimport $ from 'jquery'
main.js中编写, 隔行变色代码

$('#myUL li:even').css('color','red') //奇数筛选
$('#myUL li:odd').css('color','green') //偶数筛选

执行打包命令
把public/index.html手动复制到dist下
再手动引入打包后bundle.js

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

下载 npm add html-webpack-plugin@5.3.1 -D
webpack.config.js配置

const path = require('path')
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js', //入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), //出口文件
    filename: 'bundle.js', //出口文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以此为基准生成打包后html文件
      template: './public/index.html' //把对应路径的html进行打包
    })
  ]
}

重新打包后观察dist下

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

自动生成html和引入打包后文件, 应该怎么做?

下载 npm add html-webpack-plugin@5.3.1 -D 插件包, 给webpack.config.js配置上

说白了就是指定哪个html文件,给它生成到哪里去

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

webpack只识别js文件,默认无法打包css文件

webpack-加载器-处理css文件

css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
style-loader 把 CSS 插入到 DOM 中
一起安装使用 npm add css-loader@5.2.1 style-loader@2.0.0 -D

在main.js中进行引入(入口文件)

import './css/index.css' //导入css代码

webpack.config.js 配置

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

运行打包命令

css代码被打包进了dist/bundle.js中
运行时, css代码插入到html的style标签中,样式可以正常生效

webpack-加载器-处理less文件

less-loader
webpack 将 Less 编译为 CSS 的 loader
首先，你需要先安装 less 和 less-loader

npm add less@4.1.1 less-loader@8.1.0 -D

webpack.config.js 配置

 module: { // 如何处理项目中不同模块文件
    rules: [ // 规则
      {
        test: /\.css$/i, // 匹配所有的css文件
        // use数组里从右向左运行
        // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
        // 再用 style-loader 将样式, 把css插入到dom中
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/i, // 匹配.less结尾文件
        // 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
        use: ["style-loader", "css-loader", 'less-loader'] //顺序不能乱
        // less-loader 把less文件转css文件和代码
        // css-loader 把css代码打包进js中
        // style-loader 把css代码 -> 插入 -> DOM中
      }
    ]
  }
}

main.js(入口文件引入)

import './less/index.less' //导入less代码

一共用了四个包处理css的包+处理less的包

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

资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader

webpack.config.js填写

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

在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

在css/less/index.less - 把小图片用做背景图

body {
  background: url(../assets/images/logo_small.png) no-repeat center;
}

webpack如何支持图片打包
webpack5内置了, 只需要配置type:‘asset’
对图片有哪两种处理方案
默认8kb以下图片, 转成base64字符串打包进js中, 减少网络请求次数
超过8kb的图片, 直接复制到dist下, 转base64会增加30%体积

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

webpack.config.js

 {
        test: /\.(eot|svg|ttf|woff|woff2)$/, //匹配以eot svg ttf woff woff2为结尾的文件
        type: 'asset/resource',  // 当做静态资源直接复制文件
        generator: {
          filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
          // [name] 占位符,使用源文件的名字
          // [hash] 设置是会添加6位哈希值,防止重名
          // [ext] 代表源文件的扩展名
        }
      }

main.js(入口文件)

// 目标,打包和使用字体图标
import './assets/fonts/iconfont.css'
let thtI = document.createElement('i')
thtI.className = 'iconfont icon-qq'
document.body.appendChild(thtI)

在html设置字体图标

打包,得到结果

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

让webpack, 对高版本js语法降级

babel-loader
此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件

babel编译器=> 用于处理高版本 js语法的兼容性
webpack配合babel-loader 对js语法做处理

src/main.js - 编写箭头函数

const fn = () => { // 高级语法
  console.log("你好babel");
}
console.log(fn) // 一定打印函数, 才会被webpack把"函数体"打包起来

安装对应包

npm add -D babel-loader@8.2.2 @babel/core@7.13.15 @babel/preset-env@7.13.15

webpack.config.js 配置

  {
            test: /\.js$/, // 匹配js结尾文件
            exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
            use: { 
                loader: 'babel-loader', // 使用加载器-处理
                options: {
                    presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }

打包后观察dist/的js文件, 自动变成普通函数

webpack-开发服务器

构建入口和所有模块依赖关系图
磁盘读取对应的文件到内存, 才能加载
用对应的 loader 进行处理和翻译
将处理完的内容, 输出到内存里而非磁盘上
以后代码变化, 自动更新打包变化的代码, 显示到浏览器上

下载包

npm add webpack-dev-server@3.11.2 -D

webpack.config.js 配置

mode:'development', //开发环境,不加默认生产环境

package.json配置

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

运行命令-启动webpack开发服务器
npm run serve

启动一个web服务器和端口, 在浏览器访问查看

效果: 以后改src下的代码, 自动打包更新到浏览器上

webpack-开发服务器-配置

webpack.config.js中添加服务器配置

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000, // 端口号
      open: true // 启动后自动打开浏览器
    }
}

运行
npm run serve
端口号改变,html自动弹出

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

码农公寓

修改入口与出口点

隔行变色

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

重新打包后观察dist下

自动生成html和引入打包后文件, 应该怎么做?

说白了就是指定哪个html文件,给它生成到哪里去

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

webpack-加载器-处理css文件

在main.js中进行引入(入口文件)

webpack.config.js 配置

运行打包命令

webpack-加载器-处理less文件

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

资源模块

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

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

webpack-开发服务器

webpack-开发服务器-配置

相关文章