当前位置： 首页 > article >正文

Webpack开发模式及处理样式资源

article 2024/12/4 6:07:33

一、开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

  1. 编译代码，使浏览器能识别运行

    • 开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

  2. 代码质量检查，树立代码规范

    • 提前检查代码的一些隐患，让代码运行时能更加健壮。

    • 提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

二、处理样式资源

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

我们找 Loader 都应该去官方文档中找到对应的 Loader然后使用。

官方文档找不到的话，可以从社区 Github 中搜索查询。

Loaders | webpack 中文文档 (docschina.org)icon-default.png?t=O83Ahttps://webpack.docschina.org/loaders/

2.1 处理CSS资源

2.1.1 下载包

yarn add css-loader style-loader -D

注意：需要下载两个loader。 

2.1.2 功能介绍

👉 css-loader：负责将CSS文件编译成Webpack能识别的模块。

👉 style-loader：会动态创建一个Style标签，里面放置webpack中css模块内容。

此时样式就会以Style标签形式在页面上生效。

2.1.3 配置 -- webpack.config.js

const path = require("path");

module.exports = {
  // 入口【相对路径】
  entry: './src/main.js',
  // 输出
  output: {
    // 文件的输出路径【绝对路径】
    // __dirname 当前文件的文件夹的绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 文件的输出名称
    filename: 'main.js'
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
      // css样式
      {
        test: /\.css$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
        ]
      },
    ]
  },
  // 插件
  plugins: [
    // plugin的配置
  ],
  /* 
    模式：
      开发模式：development
      生产模式：production
  */
  mode: "development"
}

2.1.4 添加CSS资源

👉 src/css/index.css

.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

👉 src/main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

👉 public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <script src="../dist/main.js"></script>
  </body>
</html>

2.1.5 运行指令

运行以下命令之后，可以打开index.html页面查看效果。

npx webpack

2.2 处理Less资源

2.2.1 下载包

yarn add less less-loader -D

2.2.2 功能介绍

👉 less-loader：负责将Less文件编译成CSS文件。

2.2.3 配置 -- webpack.config.js

const path = require("path");

module.exports = {
  // 入口【相对路径】
  entry: './src/main.js',
  // 输出
  output: {
    // 文件的输出路径【绝对路径】
    // __dirname 当前文件的文件夹的绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 文件的输出名称
    filename: 'main.js'
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
      // css样式
      {
        test: /\.css$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
        ]
      },
      // less样式
      {
        test: /\.less$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'less-loader',// 将less文件编译成css文件
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // plugin的配置
  ],
  /* 
    模式：
      开发模式：development
      生产模式：production
  */
  mode: "development"
}

2.2.4 添加Less资源

👉 src/less/index.less

.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}

👉 src/main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

👉 public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

2.2.5 运行指令

运行以下命令之后，可以打开index.html页面查看效果。

npx webpack

2.3 处理Sass和Scss资源

2.3.1 下载包

yarn add sass sass-loader -D

2.3.2 功能介绍

👉 sass-loader：负责将Sass文件编译成CSS文件。

👉 sass：sass-loader 依赖 sass进行编译。

2.3.3 配置 -- webpack.config.js

const path = require("path");

module.exports = {
  // 入口【相对路径】
  entry: './src/main.js',
  // 输出
  output: {
    // 文件的输出路径【绝对路径】
    // __dirname 当前文件的文件夹的绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 文件的输出名称
    filename: 'main.js'
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
      // css样式
      {
        test: /\.css$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
        ]
      },
      // less样式
      {
        test: /\.less$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'less-loader',// 将less文件编译成css文件
        ]
      },
      // sass样式
      {
        test: /\.s[ac]ss$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'sass-loader',// 将sass文件编译成css文件
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // plugin的配置
  ],
  /* 
    模式：
      开发模式：development
      生产模式：production
  */
  mode: "development"
}

2.3.4 添加Sass资源

👉 src/sass/index.sass

/* 可以省略大括号和分号，但是冒号后边一定要跟空格，否则背景色不生效 */
.box3
  width: 100px
  height: 100px
  background-color: hotpink

👉 src/sass/index.scss

.box4 {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

👉 src/main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

👉 public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

2.3.5 运行指令

运行以下命令之后，可以打开index.html页面查看效果。

npx webpack

2.4 处理Styl资源

2.4.1 下载包

yarn add stylus stylus-loader -D

2.4.2 功能介绍

👉 stylus-loader：负责将Styl文件编译成CSS文件。

2.4.3 配置 -- webpack.config.js

const path = require("path");

module.exports = {
  // 入口【相对路径】
  entry: './src/main.js',
  // 输出
  output: {
    // 文件的输出路径【绝对路径】
    // __dirname 当前文件的文件夹的绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 文件的输出名称
    filename: 'main.js'
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
      // css样式
      {
        test: /\.css$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
        ]
      },
      // less样式
      {
        test: /\.less$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'less-loader',// 将less文件编译成css文件
        ]
      },
      // sass样式
      {
        test: /\.s[ac]ss$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'sass-loader',// 将sass文件编译成css文件
        ]
      },
      // stylus样式
      {
        test: /\.styl$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'stylus-loader',// 将Styl文件编译成css文件
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // plugin的配置
  ],
  /* 
    模式：
      开发模式：development
      生产模式：production
  */
  mode: "development"
}

2.4.4 添加Styl资源

👉 src/styl/index.styl

/* 可以省略大括号、分号、冒号 */
.box 
  width 100px 
  height 100px 
  background-color pink

👉 src/main.js

import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

👉 public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

2.4.5 运行指令

运行以下命令之后，可以打开index.html页面查看效果。

npx webpack

最后一个webpack.config.js配置文件中的代码，包括了上述所有样式资源处理的配置。


http://www.kler.cn/a/420895.html

相关文章：

  • 单机环境下Caffeine和Redis两级缓存的实现与问题解决
  • Flink四大基石之State(状态) 的使用详解
  • 前端：localstorage, session
  • 如何预防服务器后台爆破攻击
  • Debian 的更新原理
  • Python 代码加速
  • Hyperf jsonrpc
  • 利用 Redisson 实现分布式主键生成
  • echarts 实时 vue 使用方法
  • Python学习------第十五天
  • 12.02 深度学习-卷积
  • 东方隐侠网安瞭望台第8期
  • 手游手游手游手游手游手游手游
  • c语言基础之二维数组
  • node.js基础学习-fs模块-文件操作（六）
  • 深度学习常用测试命令解释
  • 数据分析：探索数据背后的秘密与挑战
  • 3d/伪3d统计图形
  • ISO26262-（Timing Monitoring）在多核MCU的TPU上功能安全ASILB与ASILD有什么区别
  • MacOS 命令行详解使用教程
  • LlaSMol—— 建立一个大型、高质量的指令调整数据集 SMolInstruct 用于开发一个化学任务的大语言模型
  • Flink面试题推荐
  • Springboot（四十九）SpringBoot3整合jetcache缓存
  • 微软的重大突破：bitnet.cpp 开启 AI 本地CPU运行新时代
  • 【机器学习】Sigmoid函数在深层神经网络中存在梯度消失问题，如何设计一种改进的Sigmoid激活函数，既能保持其概率预测优势，又能避免梯度消失？
  • Linux 系统中常用的命令