玖叶教程网

前端编程开发入门

2024年04月02日

webpack5入门到实战(2)（webpack快速入门）

处理样式资源

1. 开发模式

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

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

? 代码质量检查，树立代码规范

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

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

2. 介绍

Webpack 本身是不能识别样式资源的，需要借助 Loader 来帮助 Webpack 解析样式资源，去官方文档中找到对应的 Loader，然后使用，

地址：https://webpack.docschina.org/loaders/

3. 处理css资源

(1) 下载包

npm i css-loader style-loader -D

l css-loader：负责将 Css 文件编译成 Webpack 能识别的模块

l style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

(2) 使用

1) 添加配置

const { request } = require("http");

const path = require('path')
module.exports = {
  //入口：相对路径和绝对路径都行
  entry: './src/main.js',
  //输出
  output: {
    /**
    * path：文件输出目录，必须是绝对路径
    * path.resolve方法返回一个绝对路径
    * __dirname当前文件的文件夹绝对路径
    */
    path: path.resolve(__dirname,'dist'),
    //文件输出的名字
    filename: 'main.js'
  },
  //加载器
  module: {
    rules: [
      {
        //用来配置.css结尾的文件
        test: /\.css$/,
        //use数组里面Loader执行顺序是从右到左
        use:['style-loader', 'css-loader']
      }
    ]
  },
  //插件
  plugins: [
  ],
  //模式
  mode:'development', //开发模式
};

2) src/css/index.css

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

3) src/main.js

import count from './js/count'
import sum from './js/sum'
//引入css资源
import './css/index.css'

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

4) public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../dist/main.js" ></script>
<title>Document</title>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

5) 编译文件

npx webpack

6) 输出

4. 处理 Less 资源

(1) 下载包

npm i less-loader -D

l less-loader：负责将 Less 文件编译成 Css 文件

(2) 使用

1) 添加配置

const { request } = require("http");

const path = require('path')
module.exports = {
  //入口：相对路径和绝对路径都行
  entry: './src/main.js',
  //输出
  output: {
    /**
    * path：文件输出目录，必须是绝对路径
    * path.resolve方法返回一个绝对路径
    * __dirname当前文件的文件夹绝对路径
    */
    path: path.resolve(__dirname,'dist'),
    //文件输出的名字
    filename: 'main.js'
  },
  //加载器
  module: {
    rules: [
      {
        //用来配置.css结尾的文件
        test: /\.css$/,
        //use数组里面Loader执行顺序是从右到左
        use:['style-loader', 'css-loader']
      },
      {
        //用来配置.less结尾的文件
        test:/\.less$/,
        use:['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  //插件
  plugins: [
  ],
  //模式
  mode:'development', //开发模式
};

2) src/less/index.less

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

.box2_1{
margin: 10px;
width: 50px;
height: 50px;
background-color: yellow;
}
}

3) src/main.js

import count from './js/count'
import sum from './js/sum'
//引入css资源
import './css/index.css'
//引入less资源
import './less/index.less'

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

4) public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../dist/main.js" ></script>
<title>Document</title>
</head>
<body>
<div class="box1"></div>
<hr/>
  <div class="box2">
  <div class="box2_1">

</div>
</div>
</body>
</html>

5. 处理 Sass 和 Scss 资源

(1) 下载包

npm i sass-loader sass -D

l sass-loader：负责将 Sass 文件编译成 css 文件

l sass：sass-loader 依赖 sass 进行编译


(2) 使用

1) 添加配置

const { request } = require("http");

const path = require('path')
module.exports = {
  //入口：相对路径和绝对路径都行
  entry: './src/main.js',
  //输出
  output: {
    /**
    * path：文件输出目录，必须是绝对路径
    * path.resolve方法返回一个绝对路径
    * __dirname当前文件的文件夹绝对路径
    */
    path: path.resolve(__dirname,'dist'),
    //文件输出的名字
    filename: 'main.js'
  },
  //加载器
  module: {
    rules: [
      {
        //用来配置.css结尾的文件
        test: /\.css$/,
        //use数组里面Loader执行顺序是从右到左
        use:['style-loader', 'css-loader']
      },
      {
        //用来配置.less结尾的文件
        test:/\.less$/,
        use:['style-loader', 'css-loader', 'less-loader']
      },
      {
        //用来配置.sass或者.scss结尾的文件
        test:/\.s[ac]ss$/,
        use:['style-loader', 'css-loader', 'sass-loader']
      },
 	 ]
  },
  //插件
  plugins: [
  ],
  //模式
  mode:'development', //开发模式
};

2) src/sass/index.sass

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

3) src/scss/index.scss

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

4) src/main.js

import count from './js/count'
import sum from './js/sum'
//引入css资源
import './css/index.css'
//引入less资源
import './less/index.less'
//引入sass/scss资源
import './sass/index.sass'
import './scss/index.scss'

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

5) public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../dist/main.js" ></script>
<title>Document</title>
</head>
<body>
  <div class="box1"></div>
  <hr/>
  <div class="box2">
  <div class="box2_1"></div>
  </div>
  <hr/>
  <div class="box3"></div>
  <div class="box4"></div>
</body>
</html>

6. 处理styl资源

(1) 下载包

npm i stylus-loader -D

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

(2) 使用

1) 添加配置

const { request } = require("http");

const path = require('path')
module.exports = {
  //入口：相对路径和绝对路径都行
  entry: './src/main.js',
  //输出
  output: {
    /**
    * path：文件输出目录，必须是绝对路径
    * path.resolve方法返回一个绝对路径
    * __dirname当前文件的文件夹绝对路径
    */
    path: path.resolve(__dirname,'dist'),
    //文件输出的名字
    filename: 'main.js'
  },
  //加载器
  module: {
    rules: [
      {
        //用来配置.css结尾的文件
        test: /\.css$/,
        //use数组里面Loader执行顺序是从右到左
        use:['style-loader', 'css-loader']
      },
      {
        //用来配置.less结尾的文件
        test:/\.less$/,
        use:['style-loader', 'css-loader', 'less-loader']
      },
      {
        //用来配置.sass或者.scss结尾的文件
        test:/\.s[ac]ss$/,
        use:['style-loader', 'css-loader', 'sass-loader']
      },
      {
        //用来配置.styl结尾的文件
        test:/\.styl$/,
        use:['style-loader', 'css-loader', 'stylus-loader']
      },
    ]
  },
  //插件
  plugins: [
  ],
  //模式
  mode:'development', //开发模式
};

2) src/styl/index.styl

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

3) src/main.js

import count from './js/count'
import sum from './js/sum'
//引入css资源
import './css/index.css'
//引入less资源
import './less/index.less'
//引入sass/scss资源
import './sass/index.sass'
import './scss/index.scss'
//引入styl资源
import './styl/index.styl'

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

4) public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../dist/main.js" ></script>
<title>Document</title>
</head>
<body>
  <div class="box1"></div>
  <hr/>
  <div class="box2">
  <div class="box2_1"></div>
  </div>
  <hr/>
  <div class="box3"></div>
  <div class="box4"></div>
  <hr/>
  <div class="box5"></div>
</body>
</html>

结语：

　你说对生活绝望，完全失去了热情和动力，这种情况说到底，就是你比较懒。

标签：less-loader 

作者:gojiuye , 分类:技术精选 , 浏览:22 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言