demo11 webpack处理css

栏目: CSS · 发布时间: 5年前

内容简介:在 webpack 中,所有类型的文件都是模块,比如 js、css、图片、字体、json(可以说是万物皆模块)。但是,在普通的 js 代码中,我们直接 import (或require) 一张图片或css是会报错的。但在 webpack 构建的项目中,归功于 loader(加载器),webpack 能够把 js 的模块化推广至其他类型文件,比如:

在 webpack 中,所有类型的文件都是模块,比如 js、css、图片、字体、json(可以说是万物皆模块)。

但是,在普通的 js 代码中,我们直接 import (或require) 一张图片或css是会报错的。

但在 webpack 构建的项目中,归功于 loader(加载器),webpack 能够把 js 的模块化推广至其他类型文件,比如:

import('xxx.css'); // 通过css-loader处理
复制代码

2.处理 css 为什么要通过 webpack

传统引用 css 代码的方式是在 html 通过 <style><link> 标签来引入样式。

但是这样不是很方便,借助 webpack 的 style-loadercss-loader 等 loader (或plugin),我们可以实现在 .js 或者 .ts 中引用 css 文件,并让样式以 <style> 或者 <link> 的方式自动添加到 html 文件中。

3.相关 loader 或 plugin

css-loader: 实现在 js 代码中加载 css 文件,并把 css 代码转化为 js 的一个 module ,比如 import('./xxx.css')

style-loader: 实现把加载的 css 代码作为 style 标签内容插入到 html 中

style-loader/url: 实现把加载的 css 代码以 link 内容插入到 html 中

file-loader: 实现对文件进行处理,比如修改文件名,并且输出到指定的路径, file-loader 可以单独使用,也可以和 url-loader 一起使用

4.分别实现以 <style><link> 的方式引用 css

4.1 以 <style> 方式引用 css 需要的 loader 为: css-loader + style-loader

webpack.config.js 关键配置如下:

rules: [
      {
        test: /\.css$/,
        // 以<style>标签形式引用css
        use: [
          {
            loader: "style-loader",
            options: {
              singleton: true // 处理为单个style标签,注释掉试试看?
            }
          },
          "css-loader"
        ]

      }
    ],
复制代码

4.2 以 <link> 方式引用 css 需要的 loader 为: file-loader + style-loader/url (与 style-loader 是同一个包)

webpack.config.js 关键配置如下:

rules: [
      {
        test: /\.css$/,
        // 以<link>标签形式引用css
        use: [
          "style-loader/url",
          "file-loader"
        ]

      }
    ]
复制代码

5.安装相关依赖

npm install -D css-loader
npm install -D style-loader
npm install -D file-loader
复制代码

6.目录结构

// `--` 代表目录, `-` 代表文件
  --demo11
    --src
      -app.js
      -style1.css
      -style2.css
    -index.html
    -webpack.config.js
复制代码

src/app.js

// 同步加载
const style1 = import("./style1.css");
const style2 = import("./style2.css");


// window.addEventListener("click", function () {
//   // 试试异步加载? 查看控制台试试
//   const style1 = import("./style1.css");
//   const style2 = import("./style2.css");
// });
复制代码

src/style1.css

body {
  background-color: red;
}
/* console.log('11111'); */
复制代码

src/style2.css

body {
  color: black;
}
复制代码

7.编写 webpack 配置文件

webpack.config.js

const path = require("path");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径
    path: path.resolve(__dirname, "dist"), // 打包后的输出目录
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 以<style>标签形式引用css
        use: [
          {
            loader: "style-loader",
            options: {
              singleton: true // 处理为单个style标签,注释掉试试看?
            }
          },
          "css-loader"
        ]

      }
    ],
    // rules: [
    //   {
    //     test: /\.css$/,
    //     // 以<link>标签形式引用css
    //     use: [
    //       "style-loader/url",
    //       {
    //         loader: "file-loader",
    //         options: {
    //           name: '[name].[hash].css'
    //         }
    //       }
    //     ]

    //   }
    // ]

  }
};
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

YES!产品经理(上、下册)

YES!产品经理(上、下册)

汤圆、老马 / 电子工业出版社 / 2011-9-1 / 128.00元

《YES!产品经理(套装上下册)》是一本融合了经管、工具和职场小说特点的图书,作者是国内产品经理咨询界最有实力的团队。 《YES!产品经理(套装上下册)》以职场小说的形式全面介绍产品管理、产品经理相关的知识,所有的问答均放置在设计好的101个情节中,同时每一个情节之间也都有相应的联系,读者能够从具体的情节走向中不但了解到产品管理的完整知识,而且能够深刻感受到一个产品经理的现实工作状态,从知识......一起来看看 《YES!产品经理(上、下册)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具