了解Webpack并处理样式文件

news2024/11/18 9:41:30

目录

  • 引入
  • 定义
  • 安装和使用
  • 配置文件
    • 命令配置
    • 单独文件
    • 指定文件
  • 处理样式
    • css-loader
      • 使用
    • style-loader
    • less-loader
    • PostCSS
      • postcss-loader
      • postcss-preset-env

引入

随着前端的快速发展，目前前端的开发已经变的越来越复杂了：

  • 比如开发过程中我们需要通过模块化的方式来开发

  • 比如通过ES6+、TypeScript开发脚本逻辑，通过sass、 less等方式来编写css样式代码

  • 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化

但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中没有面临这些问题

  • 是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular

  • 但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的

  • Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化的

  • 但 Webpack 作为前端资源构建工具+静态模块打包器，是面试中的重中之重，我们有学习的必要

定义

webpack的官方文档是 https://webpack.js.org/ ， webpack的中文官方文档是https://webpack.docschina.org/ ， DOCUMENTATION：文档详情是有助于理解的

在这里插入图片描述

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序

  • 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具

  • 静态的static：最终可以将代码打包成最终的静态资源（部署到静态服务器）

  • 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等

  • 现代的modern：正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展

在这里插入图片描述

安装和使用

Webpack的运行是依赖Node环境的，所以电脑上必须有Node环境，再安装webpack

  • 先安装Node.js，同时会安装npm，Node官方网站：https://nodejs.org/

  • webpack的安装目前分为两个：webpack、webpack-cli：

    • npm install webpack webpack-cli –g： 全局安装

    • npm install webpack webpack-cli –D： 局部安装

    • webpack和webpack-cli什么关系呐？
      在这里插入图片描述

      1. 执行webpack命令，会执行node_modules下的.bin目录下的webpack

      2. webpack在执行时是依赖webpack-cli的，如果没有安装就会报错

      3. 因为Webpack-cli是Webpack的命令行接口，它提供了许多有用的命令来帮助开发者管理Webpack项目

      4. Webpack-cli可以理解成Webpack的’管家’，它负责接收并解析命令行参数

      5. webpack-cli解析完命令行时，它调用相应的Webpack插件或功能来执行任务，才是真正利用webpack进行编译和打包的过程

      6. 所以在安装webpack时，需要同时安装webpack-cli

      7. 第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西

  • 前面安装完就可以在项目使用webpack了：

    1. 使用 npm init创建package.json文件，用于管理项目的信息、库依赖等

    2. 使用 npm install webpack webpack-cli -D安装局部的webpack

    3. 若全局也安装了webpack要使用npx webpack命令打包，全局没安装使用webpack命令

    4. 也可以在package.json中创建"scripts": {"build": "webpack"}脚本，使用 npm run build 执行脚本打包

  • 打包会发生什么？

    • 当运行webpack命令时，webpack会查找当前目录下的 src/index.js作为入口，如果没有此文件就报错

    • 从入口开始，会生成一个依赖关系图，包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）

    • 然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）

    • 打包完会在目录下会生成一个dist文件夹，里面存放一个main.js的文件，就是打包之后的文件

    • main.js中的代码会被压缩和丑化，代码仍存在ES6语法，比如箭头函数、const等，webpack不会自动转化需要我们后面配置

配置文件

在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的

命令配置

webpack打包命令改变配置：

  • 配置webpack打包入口文件（默认src/index.js）：webpack --entry ./src/main.js，会打包./src/main.js，只有这一次打包生效

  • 配置webpack打包出口文件（默认dist/main.js）：webpack --output-path ./build，会打包代码，生成bulid文件夹

  • 配置webpack打包后的文件名（默认dist）：webpack --output-filename bundle.js，打包代码并生成bundle.js文件

  • 三者可以随意混合使用：比如 webpack --entry ./src/main.js --output-filename bundle.js

  • 想要每次打包生效需要在package.json配置"scripts": {"build": "写想要的webpack命令"}，然后打包执行 npm run build 就可以了

单独文件

也可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：

// package.json
{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4"
  }
}


// webpack.config.js
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: "/build", // 必须是绝对路径
  },
};

这时 npm run build 执行完发现，在项目目录下根本没有打包成功的文件夹，但我们在C盘看到了打包的文件，可想而知肯定是输出path配错了
在这里插入图片描述

那么我们就需要结合Node知识进行修改path了，修改后打包就能看到在当前根目录已经有了build文件夹，Node具体学习这篇文章：https://blog.csdn.net/qq_45730399/article/details/142339453?spm=1001.2014.3001.5501

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    /* 
      __dirname: 绝对路径，获取当前⽂件所在的路径，不包括后⾯的⽂件名
      path.resolve(): 将参数解析为绝对路径
      下面两行代码都可以
    */
    // path: path.resolve(__dirname, "./build"),
    path: path.resolve(__dirname, "build"),
  },
};

指定文件

如果配置文件并不是webpack.config.js的名字，这个时候可以通过 webpack --config 你的配置文件名字 来打包并指定对应的配置文件

  • 如果还是使用webpack命令打包不会报错，只是会使用默认的打包配置，配置文件无效

  • 每次执行命令对源码编译非常繁琐，可以在package.json中配置"scripts": {"build": "webpack --config wk.config.js"}

处理样式

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 引入我们打包后的js文件 -->
    <script src="../build/bundle.js"></script>
  </body>
</html>

// index.js
import "./style.css";

const divEl = document.createElement("div");
divEl.innerHTML = "hello world";
divEl.className = "box";
document.body.appendChild(divEl);

// style.css
.box {
  color: coral;
  font-size: 20px;
  font-weight: bold;
}

我们写了上面代码执行打包命令，然后发现报错了，读错误说也许需要一个loader处理css文件，这就是下面要学习的loader了
在这里插入图片描述

css-loader

上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？

  • loader 可以用于对模块的源代码进行转换

  • 可以将css文件也看成是一个模块，我们是通过import来加载这个模块的

  • 加载这个模块时，webpack不知道如何对其进行加载，必须制定对应的loader来完成这个功能

  • 对于加载css文件来说，需要一个可以读取css文件的loader，最常用的是css-loader

  • npm install css-loader -D：安装css-loader

使用

使用这个loader来加载css文件呢？有三种方式：

  • 内联方式：import "css-loader!./style.css" 内联方式使用较少，因为不方便管理

  • CLI方式（webpack5中不再使用）：在webpack5的文档中已经没有了--module-bind，实际应用中也比较少使用

  • 配置方式：在webpack.config.js文件中写明配置信息

配置信息解释如下：

  • module.rules中允许配置多个loader（因为会使用其他的loader，完成其他文件的加载）

  • 这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览

  • module.rules的配置如下：

    • rules属性对应的值是一个数组：[Rule]
    • Rule是一个对象，对象中可以设置多个属性：

      1. test属性： 用于对 resource（资源）进行匹配的，会设置成正则表达式

      2. use属性： 对应的值是一个数组：[UseEntry]，UseEntry是一个对象，可以通过对象的属性来设置一些其他属性

        loader：必须有一个 loader属性，对应的值是一个字符串

        options：可选的属性，值是一个字符串或者对象，值会被传入到loader中

      3. loader属性： 字符串，单个规则只能有一个 loader 属性，如果需要使用多个 loader，loader 属性只能指定一个 loader，应该使用 use 数组

    // wk.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // use: ["css-loader"], // 写法一

        // use: [ // 写法二
        //   {
        //     loader: "css-loader",
        //     options: {},
        //   },
        // ],

        loader: "css-loader", // 写法三
      },
    ],
  },
};

配置并打包完之后在打包文件中能看到css代码，但发现页面样式无效，因为还需要借另一个loader将style插入页面

style-loader

  • css-loader只负责将.css文件进行解析，不会将解析之后的css插入到页面中

  • 如果希望完成插入style的操作，需要另外一个loader，就是 style-loader

  • npm install style-loader -D：安装style-loader

  • 在配置文件中添加style-loader，loader的执行顺序是倒着的，需要将style-loader写到css-loader的前面

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // 写法一

        // use: [ // 写法二
        //   {
        //     loader: "style-loader",
        //     options: {},
        //   },
        //   {
        //     loader: "css-loader",
        //     options: {},
        //   },
        // ],
      },
    ],
  },
};

less-loader

在开发中，可能会使用less、sass、stylus的预处理器来编写css样式，效率会更高，想让环境支持这些预处理器，需要把less、sass等编写的css需要通过工具转换成普通的css

  • npm install less -D：下载less

  • 编写style.less代码

    // style.less
@fontSize: 20px;
@fontWeight: bold;

.box {
  color: red;
  font-size: @fontSize;
  font-weight: @fontWeight;
}

  • 在index.js文件中引入import "./style.less"

  • 尝试打包会报下图错误
    在这里插入图片描述

  • npm install less-loader -D：下载less-loader

  • 配置wk.config.js，less-loader 应该放在最后，因为需要让less-loader先把less转成css，在用css-loader解析css

    const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
          },
        ],
      },
    ],
  },
};

PostCSS

PostCSS是一个通过JavaScript来转换样式的工具，可以帮助进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置，postcss需要有对应的插件才会起效果，只要包括：

  • 自动前缀：使用插件如 autoprefixer 自动添加浏览器前缀。

  • CSS 变量：允许使用 CSS 变量和自定义属性。

  • 未来的 CSS 语法：通过 postcss-preset-env 等插件使用未来 CSS 特性。

  • 模块化：与 CSS Modules 等结合使用，实现更好的模块化支持。

postcss-loader

在webpack中使用postcss就是使用postcss-loader来处理的

  • npm install postcss-loader -D：安装postcss-loader

  • npm install autoprefixer -D：需要添加前缀，就安装autoprefixer

  • 这时就可以增加配置了，样式user-select就会被加上前缀来适配浏览器 -webkit-user-select: none; -moz-user-select: none; user-select: none

// style.less 
@fontSize: 20px;
@fontWeight: bold;

.box-less {
  height: 60px;
  color: red;
  font-size: @fontSize;
  font-weight: @fontWeight;
  user-select: none;
  background-color: #f0a4a466;
}


// wk.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                // plugins: ["autoprefixer"], // 也可以直接传入字符串
                plugins: [require("autoprefixer")], 
              },
            },
          },
        ],
      },
    ],
  },
};
  • 单独的postcss配置文件：在根目录下创建postcss.config.js，wk.config.js中还是要写postcss-loader的，只是它插件的配置放单独文件
// wk.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader",
          {
            loader: "postcss-loader",
            // options: {
            //   postcssOptions: {
            //     plugins: [require("autoprefixer")],
            //   },
            // },
          },
        ],
      },
    ],
  },
};


// postcss.config.js
module.exports = {
  plugins: [require("autoprefixer")],
};

postcss-preset-env

事实上，在配置postcss-loader时，配置插件并通常不使用autoprefixer，而使用另外一个插件：postcss-preset-env，因为它更强大

  • postcss-preset-env也是一个postcss的插件，会自动帮助我们添加autoprefixer（已经内置了autoprefixer）

  • 也可以将一些现代的CSS特性，转成大多数浏览器认识的CSS，会根据目标浏览器或者运行时环境添加所需的 polyfills（Polyfills 是一些代码（通常是 JavaScript）用来实现不被某些浏览器原生支持的特性）

  • npm install postcss-preset-env -D：安装postcss-preset-env

  • 直接把之前的autoprefixer改为postcss-preset-env，查看打包后打码可以发现它不仅加了前缀，还把less文件中的背景颜色转成浏览器能识别的 background-color: rgba(240, 164, 164, 0.4)

// wk.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader",
          {
            loader: "postcss-loader",
            // options: {
            //   postcssOptions: {
            //     plugins: [require("postcss-preset-env")],
            //   },
            // },
          },
        ],
      },
    ],
  },
};


// postcss.config.js
module.exports = {
  plugins: [require("postcss-preset-env")],
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2172898.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

物联网系统中高精度压力检测方案_压力变送器

物联网系统中高精度压力检测方案_压力变送器

01 物联网系统中为什么要使用压力变送器 在物联网系统中使用压力变送器的原因主要基于以下几个方面&#xff1a; 感知层的核心作用 物联网系统主要由感知层、传输层、平台层和应用层组成。感知层作为物联网的“排头兵”&#xff0c;负责收集物理世界中的各种信息。压力变送…
阅读更多...
十大排序算法总结

十大排序算法总结

完整文档见 排序算法总结——语雀文档 比较类排序&#xff1a;通过比较来决定元素间的相对次序&#xff0c;由于其时间复杂度不能突破O(nlogn)&#xff0c;因此也称为非线性时间比较类排序。 非比较类排序&#xff1a;不通过比较来决定元素间的相对次序&#xff0c;它可以突破…
阅读更多...
李宏毅机器学习2022-HW9--Explainable AI

李宏毅机器学习2022-HW9--Explainable AI

Task CNN explanation 11种食物图片分类&#xff0c;与HW3使用同一个dataset Bread, Diary product, Dessert, Egg, Fried food, Meat, Noodles/Pasta, Rice, Seafood, Soup, and Vegetables/Fruit 训练一个CNN model用于classification&#xff0c;并做一些explanations …
阅读更多...
一站式家装服务管理系统

一站式家装服务管理系统

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本一站式家装服务管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数…
阅读更多...
可商业化的数字孪生系统

可商业化的数字孪生系统

可商业化的数字孪生系统 相关链接 演示地址 演示地址 更多获取 更多获取 源码地址 源码地址 数字孪生系统 数字孪生系统&#xff08;Digital Twin System&#xff09;是新一代科技赋能的核心技术&#xff0c;通过虚拟与现实的双向映射&#xff0c;实现对物理世界的全面感…
阅读更多...
GAMES101(17~18节，物理材质模型）

GAMES101(17~18节，物理材质模型）

材质 BRDF 材质&#xff1a;决定了光线与物体不同的作用方式 BRDF定义了物体材质,包含漫反射和镜面部分 BSDF &#xff08;scattering散射&#xff09; BRDF&#xff08;reflect反射&#xff09; BTDF 光线打击到物体上会向四面八方散射 反射 光线打击到物体上反射出去…
阅读更多...
基于Java+SQL Server2008开发的（CS界面）个人财物管理系统

基于Java+SQL Server2008开发的（CS界面）个人财物管理系统

一、需求分析 个人财务管理系统是智能化简单化个人管理的重要的组成部分。并且随着计算机技术的飞速发展&#xff0c;计算机在管理方面应用的旁及&#xff0c;利用计算机来实现个人财务管理势在必行。本文首先介绍了个人财务管理系统的开发目的&#xff0c;其次对个人财务管理…
阅读更多...
【C语言】指针篇 | 万字笔记

【C语言】指针篇 | 万字笔记

写在前面 在学习C语言过程&#xff0c;总有一个要点难点离不开&#xff0c;那就是大名鼎鼎的C语言指针&#xff0c;也是应为有指针的存在&#xff0c;使得C语言一直长盛不衰。因此不才把指针所学的所有功力都转换成这个笔记。希望对您有帮助&#x1f970;&#x1f970; 学习指…
阅读更多...
【STM32开发环境搭建】-1-Keil(MDK) 5.27软件安装和注册教程

【STM32开发环境搭建】-1-Keil(MDK) 5.27软件安装和注册教程

目录 1 安装前装备工作 2 安装KEIL(MDK-ARM) 5.27软件 3 注册KEIL(MDK-ARM) 5.27软件&#xff0c;获取License许可证 4 手动安装STM32F0&#xff0c;STM32F1&#xff0c;STM32F4&#xff0c;STM32F7&#xff0c;STM32H7的支持包 4.1 下载STM32的支持包 4.2 安装STM32的支…
阅读更多...
JavaScript 中变量命名的最佳实践

JavaScript 中变量命名的最佳实践

全篇大概1500 字&#xff08;含代码&#xff09;&#xff0c;建议阅读时间5分钟。 1. 避免使用 var 关键字&#xff1a;过时的产物 在现代 JavaScript 中&#xff0c;我们通常避免使用 var&#xff0c;而是选择 let 和 const&#xff0c;它们提供更可预测和块范围的行为&#x…
阅读更多...
C++初阶：STL详解（七）——list的模拟实现

C++初阶：STL详解（七）——list的模拟实现

✨✨小新课堂开课了&#xff0c;欢迎欢迎~✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C&#xff1a;由浅入深篇 小新的主页&#xff1a;编程版小新-CSDN博客 前言&#xff1a; 我们前面已经了解到了lis…
阅读更多...
helm3 部署项目应用示例

helm3 部署项目应用示例

一、用到的插件 1、存储卷-日志外挂&#xff1a; 存储类自己提前建 2、env变量-存储nacos信息 二、新建项目 # helm create test-gateway 三、修改values.yaml ## 删除内容 # Additional volumes on the output Deployment definition. volumes: [] # - name: foo # se…
阅读更多...
助力智能作物植株统计分析，基于YOLOv7全系列【tiny/l/x】参数模型开发构建田间作物场景下智能精准小麦麦穗检测识别计数系统

助力智能作物植株统计分析，基于YOLOv7全系列【tiny/l/x】参数模型开发构建田间作物场景下智能精准小麦麦穗检测识别计数系统

农业实验研究的一些场景下&#xff0c;尝尝有对指定视野区域内作物植株数量进行便捷化智能自动化统计计数的需求&#xff0c;诸如&#xff1a;棉花植株统计、小麦植株统计、水稻植株统计等等&#xff0c;这些农业实验场景下&#xff0c;单纯依靠人工数数的方式来进行植株计数是…
阅读更多...
SpringBoot--yml配置文件的时间/大小的单位转换

SpringBoot--yml配置文件的时间/大小的单位转换

原文网址&#xff1a;SpringBoot--yml配置文件的时间/大小的单位转换_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍SpringBoot的yml&#xff08;properties&#xff09;配置文件的时间/大小的单位转换。 概述 SpringBoot可以将yml中的配置绑定到一个Java类的字段&#x…
阅读更多...
论文笔记——Graph Bottlenecked Social Recommendation

论文笔记——Graph Bottlenecked Social Recommendation

文章地址 代码地址 1.1简介 随着社交网络的出现&#xff0c;社交推荐已经成为个性化服务的重要技术。最近&#xff0c;基于图的社交推荐通过捕捉高阶社交影响显示出了有希望的结果。大多数基于图的社交推荐的经验研究直接将观察到的社交网络纳入公式&#xff0c;并基于社交同…
阅读更多...
【注册/登录安全分析报告：孔夫子旧书网】

【注册/登录安全分析报告：孔夫子旧书网】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…
阅读更多...
香港科技大学数据建模MSc(DDM)硕士学位项目25/26招生宣讲会-西安专场

香港科技大学数据建模MSc(DDM)硕士学位项目25/26招生宣讲会-西安专场

香港科技大学数据建模MSc(DDM)硕士学位项目25/26招生宣讲会-西安专场 &#x1f559;时间&#xff1a;2024 年10 月12日&#xff08;周六&#xff09; 16:00 &#x1f3e0;地点&#xff1a; 西安交大南洋大酒店(交通大学青龙寺店) 行政会议室 &#x1f9d1;‍&#x1f393;嘉宾…
阅读更多...
0基础学习PyTorch——GPU上训练和推理

0基础学习PyTorch——GPU上训练和推理

大纲 创建设备训练推理总结 在《Windows Subsystem for Linux——支持cuda能力》一文中&#xff0c;我们让开发环境支持cuda能力。现在我们要基于《0基础学习PyTorch——时尚分类&#xff08;Fashion MNIST&#xff09;训练和推理》&#xff0c;将代码修改成支持cuda的训练和推…
阅读更多...
[sql-03] 求阅读至少两章的人数

[sql-03] 求阅读至少两章的人数

准备数据 CREATE TABLE book_read (bookid varchar(150) NOT NULL COMMENT 书籍ID,username varchar(150) DEFAULT NULL COMMENT 用户名,seq varchar(150) comment 章节ID ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT 用户阅读表insert into book_read values(《太子日子》…
阅读更多...
MindSearch 部署到Github Codespace 和 Hugging Face Space

MindSearch 部署到Github Codespace 和 Hugging Face Space

和原有的CPU版本相比区别是把internstudio换成了github codespace。 教程是https://github.com/InternLM/Tutorial/blob/camp3/docs/L2/MindSearch/readme_github.md 复现步骤&#xff1a; 根据教材安装环境和创建硅基流动 API 然后启动前后端 然后按照教材部署到 Huggi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023