前端打包镜像并部署

转载

detailtoo 2024-10-21 12:17:51

文章标签 前端打包镜像并部署 webpack 前端 javascript css 文章分类 云原生云计算

webpack 的工作流程？

webpack概述

webpack是一个流行的前端项目构建工具（打包工具），提供代码压缩混淆、js兼容、性能优化问题等功能，从而让程序员把工作的中心放到具体的功能实现上。

前端打包镜像并部署_css

webpack使用流程

首先需要安装webpack相关的包：npm i webpack webpack-cli -D
在项目根目录中，创建名为webpack.config.js的webpack配置文件
在webpack.config.js配置文件中，初始化如下基本配置：

// webpack.config.js为webpack的配置文件
// 向外暴露一个配置对象
module.exports = {
    // 指定构建模式为开发模式，则webpack打包时不需要对打包输出的文件做压缩，打包速度较快；而相对与production产品上线阶段，会对代码进行压缩以降低文件大小，提高性能
    mode: "development" 
}

在package.json包管理配置文件中新增一个dev脚本

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"  // 新增的dev脚本
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

然后在终端输入npm run dev启动webpack进行打包，来分析整个项目的文件依赖树以及目录结构，然后将浏览器不能识别的模块进行自动转换打包输出到项目的dist文件下的main.js中，然后再根据需求，在页面中引入打包输出的main.js文件使得让浏览器能够识别的代码。

webpack配置打包的入口和出口

webpack默认打包入口entry是src下的index.js文件、默认打包出口output是dist文件夹下的main.js

const path = require("path")
module.exports = {
    // 指定构建模式为开发模式，则webpack打包时不需要对打包输出的文件做压缩，打包速度较快；而相对与production产品上线阶段，会对代码进行压缩以降低文件大小，提高性能
    mode: "development",
    // mode: "production"
    // 配置打包入口
    entry: path.join(__dirname, "./src/index.js"),
    // 配置文件打包出口
    output: {
        // 打包输出的文件路径
        path: path.join(__dirname, "./dist"),
        // 打包输出的文件名
        filename: "buldle.js"
    }
}

配置webpack自动打包功能

安装支持项目自动打包的工具webpack-dev-server，其会启动一个试试打包的http服务器。npm i webpack-dev-server ，
修改pack.json 文件中的dev命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"  //由"dev": "webpack"修改为"dev": "webpack-dev-server"
  },

将src下的index.html中的script脚本的引用路径修改为“/buldle.js”

<!-- 输出的自动打包文件为根目录下的buldle.js，此文件不是存在物理磁盘中，他是放在了内存中是虚拟的看不到的隐藏的 -->
<script src="/buldle.js"></script>
<!-- <script src="../dist/buldle.js"></script> -->

npm run dev，重新进行打包
在浏览器中访问http://localhost:8080来查看自动打包效果

配置自动打包工具后的页面预览功能

安装生成预览页面的插件。npm i html-webpack-plugin
修改webpack.config.js文件头部区域，添加以下代码信息

// 导入生成预览页面的插件得到一个构造函数，其功能就是在由一个文件夹中的文件复制一个相同的文件到根目录
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 创建插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: "./src/index.html", //指定要用到的模板文件
    filename: "index.html" //指定生成的文件的名称，改文件存在于内存中是虚拟的，在目录中不显示
})
// 向外暴露一个配置对象
module.exports = {
    // 修改webpack.config.js文件中向外暴露的配置对象，新增配置节点plugins
    plugins: [htmlPlugin], //plugin数组是webpack打包期间会用到的一些插件列表
}

执行npm run dev后就可以直接在网页上看到index.html页面，而不是呈现的是各个目录文件

配置自动打包相关的参数

当运行npm run dev时自动弹出网页页面，而不需要手动复制粘贴浏览器打开。

方法：将package.js中的  "dev": "webpack-dev-server "变为  "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"即可自动弹出浏览器，
其中--open 为打包完成后自动打开浏览器页面；--host是配置ip地址 ；  --port为配置端口号

使用loader打包非js文件

在实际开发中，webpack默认只能打包处理以.js后缀结尾的模块，其他非.js模块webpack处理不了，需要使用loader加载器才可以正常打包，否则会报错。

比如sass-loader来打包.sass相关的文件、less-loader来打包.less相关的文件。

前端打包镜像并部署_webpack_02

打包相关css文件的步骤：

安装处理css文件的loader，npm i style-loader css-loader -D
在webpack配置文件webpack.config.js的mudule->rules数组中，添加loader规则

// 所有第三方文件模块的匹配规则中
    module: {
        // 匹配规则的数组
        rules: [{
            // 此规则为打包css文件的规则,需安装 npm i style-loader css-loader
            test: /\.css$/, //test是一个正则表达式表示匹配的文件类型，用于匹配什么样的文件
            use: ["style-loader", "css-loader"] //use是一个数组表示对应要调用的loader，用什么loader加载器来处理匹配到的文件
        },
        {
            // 打包less文件的规则,需安装npm i less less-loader
            test: /\.less$/,
            // loader必须要按次序调用，即先调用style-loader、再css-loader、less-loader
            use: ["style-loader", "css-loader", "less-loader"]
        }, {
            // 打包scss文件的规则，需安装npm i sass-loader node-sass
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        }
        ]
    }

打包处理js文件中的高级语法比如ES6的class类（webpack低版本）

webpack低版本不能对js的高级语法进行默认打包，需要使用babel相关的loader来解析转换高级语法（但是现在的webpack较高版本可以默认打包了）

步骤：需安装babel转换器相关的包、在plugin插件数组中添加babel相关依赖库、创建loader规则

webpack的一些相关面试题

第一题：谈谈你对webpack的理解？

webpack是一个打包模块化js的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。WebPack可以看做是模块的打包机器：它做的事情是，分析你的项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言，例如：Scss，TS等，并将其打包为合适的格式以供浏览器使用。