webpack快速入门-处理样式资源

最新推荐文章于 2024-07-20 20:03:08 发布
最新推荐文章于 2024-07-20 20:03:08 发布
阅读量267 收藏 1
点赞数
分类专栏： webpack快速入门 文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48960335/article/details/126679922
版权

webpack 默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块webpack默认处理不了，需要调用loader才可以正常打包

loader的作用：协助webpack打包处理特定的文件模块

处理css资源

添加css资源

  • src/index.css
.box1 {
    width: 300px;
    height: 300px;
    background-color: red;
}

引入css资源

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);

// 引入 Css 资源，Webpack才会对其打包
import './index.css'

下载依赖

npm i css-loader style-loader --save-dev

loader介绍

  • css-loader: 负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader: 会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容, 样式就会以 Style 标签的形式在页面上生效

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path'); 

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'),  // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js'  // 输出文件的文件名
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    },
    // 插件列表 webpack各种扩展功能 
    plugins: [],
}

test 表示匹配的文件类型

use 表示对应要调用的 loader

include 表示需要检查的目录

exclude 表示不需要检查的目录

  • 注意：

    • use数组中指定的loader顺序是固定的

    • 多个loader的调用顺序是：从后往前调用

      1. webpack 默认只能打包处理.js结尾的文件，处理不了其他后缀的文件
      2. 由于代码中包含了index.css这个文件，因此webpack默认处理不了
      3. 当webpack发现某个文件处理不了，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader。
      4. webpack把index.css这个文件，先转交给配置数组的最后一个loader进行处理（先转交给css-loader)
      5. 当css-loader处理完毕之后，会把处理的结果，转交给前一个loader（转交给style-loader)
      6. 当style-loader处理完毕后，发现前面没有loader了，于是就把处理的结果，转交给了webpack
      7. webpack把style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件。

打包

npm run build

查看效果

创建html模板文件

dist/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>Document</title>
</head>

<body>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件 -->
    <script src="./bundle.js"></script>
</body>

</html>

效果

处理 less 和 sass/scss 资源

添加资源

  • src/index.less
#app {
    .box2 {
        height: 300px;
        width: 300px;
        background-color: aquamarine;
    }
}
  • src/index.scss
#app {
    .box3 {
        height: 300px;
        width: 300px;
        background-color: burlywood;
    }
}

引入资源

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
sum(2, 3, 5);

// 引入 Css 资源，Webpack才会对其打包
import './index.css'
import './index.less'
import './index.scss'

下载依赖

npm i less-loader node-sass sass-loader --save-dev

loader介绍

  • less-loader: 负责将 Less 文件编译成 Css 文件
  • sass-loader: 负责将 Sass 文件编译成 css 文件
  • node-sass: sass-loader 依赖 node-sass 进行编译

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path'); 

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'),  // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js'  // 输出文件的文件名
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
        ]
    },
    // 插件列表 webpack各种扩展功能 
    plugins: [],
}

打包

npm run build

查看效果

dist/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>Document</title>
</head>

<body>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div id="app">
        <div class="box2">less</div>
        <div class="box3">sacc/scss</div>
    </div>
    <!-- 引入打包后的js文件 -->
    <script src="./bundle.js"></script>
</body>

</html>

在这里插入图片描述

可以看到，less与sass/scss的语法已经被转换为css格式

查看本系列文章合集click me

下载本系列文章源码click me

温情key
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack处理样式资源
黔肆的博客
03-10 111
webpack对样式资源的处理
webpack-starter-basic:一个简单的webpack入门项目
05-19
在 "webpack-starter-basic" 项目中，你可以看到如何将 JavaScript 代码、样式表、图片等资源整合到一起，形成一个可部署的 Web 应用。这个基本的启动模板对于初学者来说是一个很好的实践平台，可以帮助理解 Webpack...
webpack之处理js资源
m0_63685436的博客
03-18 675
webpack的学习
Webpack快速上手（三）动态导入和懒加载
传说中的腿腿的博客
04-29 1652
Webpack的动态导入和懒加载
Webpack的简单使用
qq_51447436的博客
03-29 5682
Webpack的简单使用
【webpack打包 css顺序异常问题解决】
limuzhixing的博客
11-11 685
webpack打包 css顺序异常问题解决
react-webpack-empty-starter
05-14
特征使用webpack进行编译React和jsx React路由器样式表可以是CSS，LESS，SASS，Stylus或混合样式嵌入式资源（例如图像或字体）在适当的情况下使用DataUrls 一个简单的标志按需加载一个React组件（和依赖项）。...
webpack-codepen-starter-kit:Webpackreact 编译后粘贴到 codepen 中
06-03
react 和 webpack 的入门模板。 特征 使用 webpack 编译 React和 jsx React路由器 样式表可以是 CSS、LESS、SASS、Stylus 或混合 嵌入式资源（如图像或字体）在适当时使用 DataUrls 一个简单的标志按需加载React...
webpack-react-sample:一个示例 webpack react 项目
06-22
react 和 webpack 的入门模板。 特征 使用 webpack 编译 React和 jsx React路由器 样式表可以是 CSS、LESS、SASS、Stylus 或混合 如果合适，嵌入的资源（如图像或字体）使用 DataUrls 一个简单的标志按需加载React...
webpack-starter:用于的入门套件
05-08
Webpack 是一个模块打包工具，它将应用中的各种资源（如JavaScript、CSS、图片等）视为模块进行处理，然后将它们打包成一个或多个可部署的静态资源。 ### React 支持 React 是Facebook开发的一个用于构建用户界面的...
webpack生产环境下的配置
web
07-16 413
在入口文件(src/index.js)引入@babel/polyfill。在入口文件引入 @babel/polyfill。根配置，配置eslint标准。方案2和方案三选一种即可。
webpack优化
web
07-16 507
**
【Vite】快速入门及其配置
小秀的博客
07-20 139
Vite也是前端的构建工具。vite开发时，并不对代码打包，而是直接采用ESM的方式来运行项目在项目部署时，在对项目进行打包除了速度外，vite使用起来也更加方便默认项目源码目录就是根目录，而不像 webpack 那样是 src 目录。
webpack和vite
2301_80339466的博客
07-17 834
本质上，是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。【按需打包】webpack在node中运行。
Vue3+Vite+TS+Axios整合详细教程
majingbobo的博客
07-14 1125
Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+ Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite 是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：它基于原生的es模块，提供了丰富的内建功能，如速度快到惊人的模块热更新HMR.
【Webpack】HMR 热更新
最新发布
小秀的博客
07-20 63
不使用热更新，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会；如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，只会重新编译修改的代码，将新的模块发送到客户端，替换掉旧的模块，不必完全刷新整个应用。HMR全称Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。时，服务器端会将新的模块发送给客户端，客户端接收到新的模块后会⽤新模块替换旧模块，从⽽实现实时更新。
【webpack开发环境下的配置】
web
07-16 425
/ 开发服务器， devServer: 自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）// 启动devServer指令为：npx webpack-dev-server。// 特点：只会在内存中编译打包，不会有任何输出。其他资源: 指不需要处理的资源如字体图标。以上两个命令都可以，任选一个就行。
【漏洞复现】Next.js框架存在SSRF漏洞(CVE-2024-34351)
siu~
07-19 338
ZEIT Next.js 13.4版本至14.1.1之前版本存在代码问题漏洞，该漏洞源于存在服务器端请求伪造 (SSRF) 漏洞
vue 环境变量那些事
weixin_42028153的博客
07-10 565
env.production 代表的生产环境变量也就是上线以后使用的。.env.development 代表的开发环境变量。取：import.meta.env.VITE_变量名。取：process.env.VUE_APP_变量名。总则：使用 .env.环境名字文件去定义，运行命令的时候指定环境。vite+vue3项目（默认VITE开头，其他开头的需要配置）存：VUE_APP_变量名 = xxx。比如：.env 代表所有环境变量使用的一些变量。vue-cli项目（webpack+vue2）
Vue入门：Webpack+vue-cli构建，从简单雏形到组件开发
Vue入门者需要掌握数据绑定、指令、事件处理、属性绑定和组件的概念，通过实践项目来熟练运用这些核心概念。随着对Vue.js深入理解，开发者可以逐步提升到工程性开发，借助Webpack和vue-cli这样的工具进行模块化打包...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温情key

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值