Webpack打包———处理样式资源

最新推荐文章于 2024-11-07 09:29:47 发布

BUG不加糖

最新推荐文章于 2024-11-07 09:29:47 发布

阅读量750

点赞数 3

分类专栏：总结文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/yx0711/article/details/129460924

版权

总结专栏收录该内容

50 篇文章 1 订阅

订阅专栏

基本使用

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

功能介绍

基本来说Webpack本身的能力是有限的，它分为两种模式，
1、开发模式：仅能编译 JS 中的 ES Module 语法
2、生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码
但是我们平常写项目的时候并不只是有js还有其他的一些东西，这次我就来分享一下处理样式资源的一些使用

基本配置

项目根目录（所有指令必须在这个目录运行）
└── src # 项目源码目录
├── js # js文件目录
│ ├── count.js
│ └── sum.js
└── main.js # 项目主文件

下面我们来测试一下基本的Webpack打包的功能

文件内容

count.js

export default function count(x, y) {
  return x - y;
}

sum.js

export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

main.js

import count from "./js/count";
import sum from "./js/sum";

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

初始化json文件

在跟目录的终端执行初始化package.json命令

npm init -y

另外需要注意的是package.json中的name的属性不能叫做webpack
下载依赖

npm i webpack webpack-cli -D

Webpack文件配置

在跟目录新建文件webpack.config.js

Webpack文件配置

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

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

运行命令

npx webpack

当看见跟目录里边出现一个dist文件夹就代表好了

处理样式资源

一、处理css

1、下载

npm i css-loader style-loader -D

2、配置

在这里插入图片描述

{
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },

3、添加css资源

在src文件夹中新建css文件夹，在css文件夹中新建index.css文件

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

之后要在main.js中引入css

import "./css/index.css";

4、查看结果

在跟目录中新建public文件夹，在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>

运行

npx webpack

之后打开index.html文件查看结果即可

二、处理less

1、下载

npm i less-loader -D

2、配置

 {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },

3、添加less资源

在src文件夹中新建less文件夹，在less文件夹中新建index.js

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

在main.js中引入less

import "./less/index.less";

4、查看结果

在html文件中添加

 <div class="box2"></div>

运行命令查看结果

三、处理sass和scss

1、下载

npm i sass-loader sass -D

2、配置

	{
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },

3、添加sass资源

在src文件夹中新建sass文件夹，在sass文件夹中新建index.sass和index.scss
index.sass

.box3
  width: 100px
  height: 100px
  background-color: hotpink

index.scss

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

在main.js中引入

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

4、查看结果

在index.html中添加

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

运行命令查看结果

四、处理styl资源

1、下载

npm i stylus-loader -D

2、配置

	{
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },

3、添加styl资源

在src下新建styl文件夹，在styl文件夹中新建index.sty文件

.box 
  width 100px 
  height 100px 
  background-color pink

在main.js中引入

import "./styl/index.styl";

4、查看结果

在index.html中添加

<div class="box"></div>

运行查看结果

总结

这周的总结就先到这里，之后会逐渐分享其它资源的Webpack配置

BUG不加糖

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录