Webpack学习：使用开发模式-处理css资源

最新推荐文章于 2024-02-17 17:30:59 发布

¡Venceremo

最新推荐文章于 2024-02-17 17:30:59 发布

阅读量135

点赞数

分类专栏： Webpack 文章标签： webpack 学习 css Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129683462

版权

Webpack 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

Webpack本身不支持样式资源处理，需要使用Loader如css-loader和style-loader。css-loader将CSS编译成CommonJS模块，style-loader则将CSS插入HTML中。配置Webpack时，在module.rules中设置匹配.css文件的规则，使用这两个Loader。在未配置或缺少Loader时，Webpack会报错。安装并正确配置后，Webpack能成功打包CSS并将其应用到页面中。

摘要由CSDN通过智能技术生成

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

https://webpack.docschina.org/loaders/

处理css,就需要看一下css_loader

创建css资源

.box1{
  display: flex;
  width: 300px;
  height: 300px;
  background-image: url('../images/1.jpg');
  background-size: cover;
}

// 想要webpack打包资源，必须引入该资源

不配置css加载器就会报错

webpack 5.76.2 compiled with 1 error in 76 ms

you may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

你需要先安装 css-loader：

npm install --save-dev css-loader

引入css文件，然后配置webpack.config.js

    // 加载器
    module: {//loader规则
      rules: [
        {
          test: /\.css$/i, // 用来匹配 .css 结尾的文件
          use: [
            "style-loader", //将js中css通过创建style标签添加到html中
              "css-loader" //该模块将css资源编译成commonjs的模块到js中
            ],//use 数组里面 Loader 执行顺序是从右到左(从下到上)
        },
      ],
    },

"css-loader" 该模块将css资源编译成commonjs的模块到js中，然后style-loader将js中css通过创建style标签添加到html中让

// 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: {//loader规则
      rules: [
        {
          test: /\.css$/i, // 用来匹配 .css 结尾的文件
          use: [
            "style-loader", //将js中css通过创建style标签添加到html中
              "css-loader" //该模块将css资源编译成commonjs的模块到js中
            ],//use 数组里面 Loader 执行顺序是从右到左(从下到上)
        },
      ],
    },
    // 插件
    plugins: [],
    // 模式
    mode: "development",// 开发模式
  };

Module not found: Error: Can't resolve 'style-loader' in 'E:\ECMAScript6-11\webpack_study'

安装模块

 npm i style-loader -D

运行 npx webpack 成了、

页面中出现了动态的stylecss标签

为了更好显示：将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>webpack</title>
</head>
<body>
  <h1>hello webpack~~~</h1>
 <div class="box1"></div>
  <script src="../dist/main.js"></script>
</body>
</html>