Webpack5相关知识点（一）- 基础（2）- 基本配置和处理样式资源

最新推荐文章于 2024-05-25 11:34:17 发布

JHY97

最新推荐文章于 2024-05-25 11:34:17 发布

阅读量401

点赞数

分类专栏：打包工具文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/JHY97/article/details/125064658

版权

打包工具专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、基本配置

1.1 核心概念

1.2 基本配置

1.2.1 准备 Webpack 配置文件

1.2.2 修改配置文件

二、处理样式资源

2.1 css样式资源

2.1.1 下载 css-loader 和 style-loader

2.1.2 配置文件

2.1.3 引入CSS资源

2.2 less样式资源

2.2.1 下载 less-loader 和 less

2.2.2 配置文件

2.2.3 引入less资源

2.3 sass和scss样式资源

2.3.1 下载 sass-loader 和 sass

2.3.2 配置文件

2.3.3 引入sass 和 scss 资源

2.4 Styl样式资源

2.4.1 下载 stylus-loader 和 stylus

2.4.2 配置文件

2.4.3 引入Styl资源

一、基本配置

1.1 核心概念

（1）entry（入口）：指示 Webpack 从哪个文件开始打包

（2）output（输出）：指示 Webpack 打包完的文件输出到哪里去，如何命名等

（3）loader（加载器）：webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

（4）plugins（插件）：扩展 Webpack 的功能

（5）mode（模式）- 主要由两种模式：

开发模式：development
生产模式：production

1.2 基本配置

1.2.1 准备 Webpack 配置文件

在项目根目录下新建文件：webpack.config.js

// webpack.config.js

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

1.2.2 修改配置文件

webpack.config.js 配置文件修改

// Node.js的核心模块，专门用来处理路径问题
const path = require("path");

module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径和绝对路径都行
  // 输出
  output: {
    //   文件输出路径
    // __dirname：nodejs的变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "dist"), // 绝对路径
    // 文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
    ],
  },
  // 插件
  plugins: [
    // plugins的配置
  ],
  // 模式
  mode: "development",
};

运行指令：

npx webpack

注意：这里已经准备好了Webpack 配置文件 - webpack.config.js，所以直接使用运行指令：npx webpack 即可

二、处理样式资源

Webpack官方文档：Loaders | webpack 中文文档 (docschina.org)

2.1 css样式资源

2.1.1 下载 css-loader 和 style-loader

npm install --save-dev css-loader style-loader
或
npm i css-loader style-loader -D

安装成功后可以在package.json文件中看到

2.1.2 配置文件

webpack.config.js

 ...
 // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        // 执行顺序从右到左（从下到上）
        use: [
          "style-loader", // 将js中css通过创建style标签添加到html文件中生效
          "css-loader", // 将css资源编译成commonjs的模块到js中
        ],
      },
    ],
  },
...

css-loader：负责将 CSS 文件编译成 Webpack 能识别的模块
style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 CSS 模块内容

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

2.1.3 引入CSS资源

（1）创建CSS文件：src/css/index.css

.box1 {
  width: 100px;
  height: 100px;
  color: #fff;
  background-color: skyblue;
}

（2）src/main.js中引入CSS文件

import count from "./js/count";
import sum from "./js/sum";
// 引入css文件
import "./css/index.css";

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

（3）public/index.html 准备一个使用样式的DOM容器

<!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">
      <h1>Hello World</h1>
    </div>
    <script src="../dist/main.js"></script>
  </body>
</html>

（4）运行打包指令：

npx webpack

打开 index.html 页面查看效果，可以看到样式被渲染出来

2.2 less样式资源

2.2.1 下载 less-loader 和 less

在css-loader 和 style-loader已经安装完的情况下，只需下载less-loader 和 less

npm i less-loader less -D

less-loader：负责将 less 文件编译成 css 文件

2.2.2 配置文件

webpack.config.js

  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },

2.2.3 引入less资源

（1）创建less文件：src/less/index.less

@maincolor: red;
.box2 {
  width: 100px;
  height: 100px;
  background-color: @maincolor;
}

（2）src/main.js中引入less文件

import "./less/index.less";

（3）public/index.html 准备一个使用样式的DOM容器

    <!-- 使用样式的DOM容器 -->
    <div class="box1">
      <h1>Hello World</h1>
    </div>
    <div class="box2"></div>

（4）运行打包指令：

npx webpack

打开 index.html 页面查看效果，可以看到样式被渲染出来

2.3 sass和scss样式资源

2.3.1 下载 sass-loader 和 sass

在css-loader 和 style-loader已经安装完的情况下，只需下载sass-loader 和 sass

npm i sass-loader sass -D

sass-loader：负责将 sass 文件编译成 css 文件
sass：sass-loader 依赖 sass 进行编译

2.3.2 配置文件

webpack.config.js

  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },

2.3.3 引入sass 和 scss 资源

（1）创建scss文件：src/sass/index.scss

.box3 {
  width: 100px;
  height: 100px;
  background-color: orange;
}

（2）创建sass文件：src/sass/index.sass

.box4
    width:100px
    height:100px
    background-color: yellow

（3）src/main.js中引入sass和scss文件

import "./sass/index.sass";
import "./sass/index.scss";

（4）public/index.html 准备使用样式的DOM容器

    <div class="box3"></div>
    <div class="box4"></div>

（5）运行打包指令：

npx webpack

打开 index.html 页面查看效果，可以看到样式被渲染出来

2.4 Styl样式资源

2.4.1 下载 stylus-loader 和 stylus

在css-loader 和 style-loader已经安装完的情况下，只需下载stylus-loader 和 stylus

npm i stylus stylus-loader -D

stylus-loader：负责将 styl 文件编译成 css 文件

2.4.2 配置文件

webpack.config.js

  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },

2.4.3 引入Styl资源

（1）创建styl文件：src/stylus/index.styl

.box5
    width 100px
    height 100px
    background pink

（2）src/main.js中引入styl文件

import "./stylus/index.styl";

（3）public/index.html 准备一个使用样式的DOM容器

    <div class="box5"></div>

（4）运行打包指令：

npx webpack

打开 index.html 页面查看效果，可以看到样式被渲染出来

JHY97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Webpack5相关知识点（一）- 基础（2）- 基本配置和处理样式资源

目录一、基本配置1.1 核心概念1.2 基本配置1.2.1 准备 Webpack 配置文件1.2.2 修改配置文件二、处理样式资源2.1 css样式资源2.1.1 下载css-loader 和 style-loader2.1.2配置文件2.1.3引入CSS资源2.2less样式资源2.2.1 下载less-loader 和 less2.2.2配置文件2.2.3引入less资源2.3 sass和scss样式资源2.3.1 下载 sa...
复制链接

扫一扫