快捷導(dǎo)航

Webpack處理樣式資源的配置詳情

更新時間：2023年12月14日 10:05:32 作者：杜同學(xué)。

Webpack 本身是不能識別樣式資源的,所以我們需要借助 Loader 來幫助 Webpack 解析樣式資源,本文就來介紹一下Webpack處理樣式資源的配置詳情,感興趣的可以了解一下

CSS資源的處理

1.下載對應(yīng)的Loader

npm i css-loader style-loader -D

`css-loader`：負責(zé)將 Css 文件編譯成 Webpack 能識別的模塊,也就是將css文件轉(zhuǎn)化為符合commonJs語法的js文件

`style-loader`：會動態(tài)創(chuàng)建一個 Style 標(biāo)簽添加到html頁面上，里面放置 Webpack 中 Css 模塊內(nèi)容，此時樣式就會以 Style 標(biāo)簽的形式在頁面上生效

2.具體配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用來匹配 .css 結(jié)尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

3.具體使用

例如我們使用如下代碼走一個完整的流程

- src/css/index.css

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

- src/main.js

###
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
###
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>
    <!-- 準(zhǔn)備一個使用樣式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <script src="../dist/main.js"></script>
  </body>
</html>
###

有了如上代碼文件后，我們運行以下指令：

npx webpack

然后就可以打開 index.html 頁面查看效果

less資源的處理

1.下載對應(yīng)的Loader

npm i less-loader -D

`less-loader`：負責(zé)將 Less 文件編譯成 Css 文件

2.具體配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用來匹配 .css 結(jié)尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

3.如何使用

和上述CSS文件的處理運行方式一樣，只需要寫好對應(yīng)的Less資源、html資源等，然后執(zhí)行如下指令，再打開index.html查看效果即可

處理 Sass 和 Scss 資源

1.下載對應(yīng)的Loader

npm i sass-loader sass -D

-`sass-loader`：負責(zé)將 Sass 文件編譯成 css 文件

`sass`：`sass-loader` 依賴 `sass` 進行編譯

2.具體配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用來匹配 .css 結(jié)尾的文件
        test: /\.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

具體使用和CSS、Less使用方式相同，只需寫出對應(yīng)資源運行 npx webpack 命令即可。

到此這篇關(guān)于Webpack處理樣式資源的配置詳情的文章就介紹到這了,更多相關(guān)Webpack 樣式資源內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: