首页 > 其他分享> 文章详细

webpack基础_4处理样式资源

2022-09-07 22:32:04 阅读：199 来源： 互联网

标签：style 样式 loader 处理 webpack js css

介绍

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader（加载器）来帮助 Webpack 解析样式资源。

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用。

官方文档找不到的话，可以从社区 Github 中搜索查询

webpack中文官方文档

处理 Css 资源

1. 下载包

npm i css-loader style-loader -D
注意：需要下载两个 loader

2. 功能介绍

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

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

3. 配置

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左（从下到上）
		//必然先将样式打包到js中，然后再从js中找到css样式，然后生效。
        use: ["style-loader",// 将js中css通过创建style标签添加html文件中生效。
		"css-loader"// 将css资源编译成commonjs的模块到js中。
		],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4. 添加 Css 资源

src/css/index.css

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

src/main.js

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

//不管你在什么模式中创建了那些文件js也好，css也罢，都要导入到入口文件中，
//才能够被打包到一个指定区域的文件中，然后打包好了，
//再到public 的html 中去引入，才能被浏览器解析。

// 引入 Css 资源，Webpack才会对其打包
////样式只需要引入，引入的目的只是为了让他被打包，不需要定义变量接收，因为定义变量接收在js里也没法用，因为是给html用的。
import "./css/index.css";

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

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>

5. 运行指令

npx webpack

打开 index.html 页面查看效果
如图：会动态创建style标签，将样式从js中引入到页面。

报错：没下载任何loader就打包

webpack默认只能处理js，遇到别的是处理不了的，需要loader来处理。
尽管配置了webpack.config.js，和在入口文件里引入了css文件。

报错：loader没下载全就打包

官网只叫你安装css-loader加载器，却没叫你安装style-loader依赖。

下载好style-loader这个依赖即可。

标签：style,样式,loader,处理,webpack,js,css
来源： https://www.cnblogs.com/fhzmasl/p/16667531.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9