• 前端构建工具(webpack&vite)


    构建工具

    当我们习惯了在node中编写代码的方式后,在回到前端编写html、css、js这些东西会感觉到各种的不便。比如:不能放心的使用模块化规范(浏览器兼容性问题)、即使可以使用模块化规范也会面临模块过多时的加载问题。我们就迫切的希望有一款工具可以对代码进行打包,将多个模块打包成一个文件。这样一来即解决了兼容性问题,又解决了模块过多的问题。构建工具就起到这样一个作用,通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法,这样可以使得所有的浏览器都可以支持代码。

    webpack介绍

    src 是把所有的源码放在了这个src 里面。
    我们使用打包工具的前提是这个项目得是一个node项目,所以我们在使用webpack要先把项目初始一下 yarn init -y,会出现一个package.json,初始化就完事了。然后就安装依赖 yarn add -D webpack webpack-cli. -D表示的是开发依赖,区分一下是开发的时候要用的还是运行的时候要用的。然后再项目中创建src 目录,然后编写代码,index.js是默认主目录,是入口文件。然后执行‘’yarn webpack 来对代码进行打包,打包好观察dist目录。dist目录就是打包后的版本。dist目录里有个main.js,就是打包后的代码,index.js是源码。在这里插入图片描述webpack-cli 是命令行工具,没有安装不能用yarn webpack打包。

    配置文件简介

    webpack.config.js是给node.js看的,所以要遵循node的模块化规范。怎么区分,src 以内的遵循前端规则,src以外的遵循node的开发规范。在这里插入图片描述

    entry

    在这里插入图片描述
    entry 是用来指定打包时的主文件(入口文件 ) 默认是 ./src/index.js。一般不改。在这里插入图片描述

    output

    在这里插入图片描述
    在这里插入图片描述

    loader

    webpack默认情况下,只会处理js文件,如果我们希望它可以处理其他类型的文件,则要为期引入loader。loader 让 webpack 能够去处理其他类型的文件(默认只能处理js文件),并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
    使用步骤:
    1.安装对应的loader: yarn add css-loader style-loader -D.
    2.配置方式:
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    css-loader 只负责打包,style-loader 负责渲染生效【单一职责原则】
    loader 执行顺序为从后向前执行,因此use的数组顺序不能调换

    babel

    在编写js代码时,经常需要使用一些js中的新特性,而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。babel就是这样一个工具,可以将新的js语法转换为旧的js,以提高代码的兼容性。

    使用步骤
    1.安装 npm install -D babel-loader @babel/core @babel/preset-env
    在这里插入图片描述
    2.配置

    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
    

    3.在package.json中设置兼容列表
    在这里插入图片描述

    插件

    在这里插入图片描述
    常用插件
    html-webpack-plugin
    这个插件可以在打包代码后,自动在打包目录生成html页面
    使用步骤:
    1.安装依赖 yarn add -D html-webpack-plugin
    2.引入依赖 const HTMLPlugin = require(“html-webpack-plugin”)
    3.配置插件
    在这里插入图片描述

    开发服务器(webpack-dev-server

    安装:yarn add -D webpack-dev-server
    启动:yarn webpack server–open(–open 表示启动服务器后自动打开浏览器)
    配置 webpack-watch 执行,(在本地文件夹中访问)代码发生变化时自动更新打包。在这里插入图片描述
    可以在package.json中配置
    1.先用yarn add-D webpack-dev-server 安装一下
    2.就可以启动了,在命令行打yarn webpack server
    3.就会把我们的代码布置在一个服务器中
    4.直接访问这个地址就行了
    在这里插入图片描述
    注意:在执行开发服务器之后,一定要在手动的执行yarn webpack,然后才能把打包的东西放在服务器里,不然可能拿到的不是最新的

    soureMap

    devtool:“inline-source-map” 把我们的源码和编译后的这种代码给我们做成了一个映射
    在这里插入图片描述

    vite

    概念
    vite也是前端的构建工具
    相较于webpack,vite采用了不同的运行方式:
    开发时,不对代码打包,而是采用ESM(ES模块)的方式来运行项目
    在项目部署时,再对项目进行打包
    vite的速度比webpack要快很多,使用也很方便(都配置好了)
    本质上vite和webpack是打包工具,只是webpack比较底层,需要自己手动去配置。
    ESM必须通过url加载页面(也就是通过服务器运行,不是本身文件)
    基本使用
    1.安装开发依赖 yarn add -D vite
    2.vite的源码目录默认就是项目的根目录
    再页面中引入js文件的时候要指定 type = ‘module’
    修改路径直接在script 标签中修改src属性正确即可(webpack需要配置)
    3.开发命令:
    vite 启动开发服务器
    vite bulid 打包代码
    vite preview 预览打包后代码
    4.使用命令构建项目
    在这里插入图片描述
    5.使用插件
    在这里插入图片描述
    需要使用ES6的模块化(export default)去暴露文件(区别webpack使用require)

  • 相关阅读:
    【C语言程序设计】实验 2
    CLIP 基础模型介绍寄论文讲解
    RTQ2117C-QA多协议USB Type-C车载快充(RTQ2117C)
    【JavaSE】static关键字
    Vue3学习(十六)- 左侧显示分类菜单
    第十三届蓝桥杯JavaB组国赛E题——迷宫 (AC)
    sql防止连表查询后出现空行数据
    CListCtrl设置只显示单列 2023/9/5 下午4:07:05
    Unity 热更--AssetBundle学习笔记 0.8
    Jenkins+Allure+Pytest的持续集成
  • 原文地址:https://blog.csdn.net/yuanmenglxb2004/article/details/140229870