webpack 引入css link,demo11 webpack处理css
在 webpack 中,所有类型的文件都是模块,比如 js、css、图片、字体、json(可以说是万物皆模块)。
但是,在普通的 js 代码中,我们直接 import (或require) 一张图片或css是会报错的。
但在 webpack 构建的项目中,归功于 loader(加载器),webpack 能够把 js 的模块化推广至其他类型文件,比如:
import('xxx.css'); // 通过css-loader处理
复制代码
2.处理 css 为什么要通过 webpack
传统引用 css 代码的方式是在 html 通过
或
标签来引入样式。
但是这样不是很方便,借助 webpack 的 style-loader
和 css-loader
等 loader (或plugin),我们可以实现在 .js 或者 .ts 中引用 css 文件,并让样式以
或者
的方式自动添加到 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.分别实现以
和
的方式引用 css
4.1 以
方式引用 css 需要的 loader 为: css-loader
+ style-loader
webpack.config.js 关键配置如下:
rules: [
{
test: /\.css$/,
// 以
use: [
{
loader: "style-loader",
options: {
singleton: true // 处理为单个style标签,注释掉试试看?
}
},
"css-loader"
]
}
],
复制代码
4.2 以
方式引用 css 需要的 loader 为: file-loader
+ style-loader/url
(与 style-loader 是同一个包)
webpack.config.js 关键配置如下:
rules: [
{
test: /\.css$/,
// 以标签形式引用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$/,
// 以
use: [
{
loader: "style-loader",
options: {
singleton: true // 处理为单个style标签,注释掉试试看?
}
},
"css-loader"
]
}
],
// rules: [
// {
// test: /\.css$/,
// // 以标签形式引用css
// use: [
// "style-loader/url",
// {
// loader: "file-loader",
// options: {
// name: '[name].[hash].css'
// }
// }
// ]
// }
// ]
}
};
复制代码
webpack 引入css link,demo11 webpack处理css相关推荐
- 解决/WEB-INF目录下的jsp页面引入webRoot下的Js、css和图片的问题
通常把jsp页面放在webRoot的/WEB-INF下可以防止访问者直接输入页面. 而webRoot的/WEB-INF下的页面是受保护的,用户无法通过形如http://localhost:8080/t ...
- Webpack: CSS 到 Sass/Scss 与 CSS Module
Webpack: CSS 到 Sass/Scss 与 CSS Module 文章目录 Webpack: CSS 到 Sass/Scss 与 CSS Module 前言 正文 1. 在 JS 中引入 C ...
- webpack的安装及使用webpack打包js、css文件
目录 webpack介绍 前端模块化和打包概念介绍 webpack和grunt/gulp的对比 webpack和nodejs的关系 webpack安装 webpack使用示例 环境搭建 使用webpa ...
- 【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件
目录 webpack和node和npm的关系 npm install webpack -g -g是全局的意思 项目中一般有两个文件夹: src,dist(distribution) WebPack的使 ...
- link引入html5,CSS引入方式 | link和@import的区别 — 生僻的前端考点
link和@import的区别 HTML5学堂:CSS的引入方式有外部引入.页面头部书写.标签内联书写,其实还有@import的引入方式,但是现在基本被淘汰掉了.为了让大家了解到更多的知识,今天给大家 ...
- webpack使用css-loader跟style-loader加载css报错
webpack使用css-loader跟style-loader加载css报错 webpack使用css-loader跟style-loader加载css报错 webpack.config.js 配置 ...
- react+webpack 引入字体图标
在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...
- html如何引入swiper,vue-cli webpack 引入swiper的操作方法
1:下载需要 swiper 的js文件和css文件 http://www.swiper.com.cn/ 2:下载好swiper相关的js和css,js放在static目录下,css放在assets目录 ...
- webpack 引入jquery和第三方jquery插件
1.引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可. index.html: <!DOCTYPE html> <html> ...
最新文章
- C#10 和 .NET6 代码跨平台开发
- RabbitMQ/pika模块
- 洛谷找最小值c语言,洛谷 P1478 陶陶摘苹果(升级版) C语言实现
- C#LeetCode刷题之#231-2的幂(Power of Two)
- 【字符编码】彻底理解字符编码
- CAFFE(FAQ.2):Ubuntu 配置caffe 框架之数据库读取,错误解决:ImportError: No module named leveldb解决办法...
- 移动端web自适应解决方案: adaptive.js
- 浅析刚参加工作的大学生的心理态势
- vB编程VB源码 VB读取EXCEL工作薄某个表中数据 ADODB.Recordset
- 发那科机器人override指令_发那科FANUC机器人编写简单的程序详细教程
- 2018 蓝桥杯 省赛 B组 原题 C语言B组 第二题 第九届蓝桥杯真题+答案+解析
- NETWARE系统加入服务器,如何在 Netware 服务器中安装多块网卡
- YTU OJ 2476 Problem B C++习题 继承与组合
- 怎样使用Maya快速制作角色模型
- 【面试】896- 助力春招!2021 阿里字节快手新鲜面经
- python3图片处理(笔记)
- 一起来看流星雨剧情简介/剧情介绍/剧情分集介绍第二十一集
- 数字图像处理(15): 灰度直方图(matplotlib 和OpenCV 绘制直方图)
- [RK3399][Android7.1] 调试笔记 --- 解决开关按键时产生的Pop声
- T440服务器显示器接口,最详细联想ThinkPad T440 屏幕暗影维修过程图文帖
热门文章
- python java web前端 net 移动开发_JavaScript超越了Java,c,python等等成为Stack Overflow上最热门的...
- C++ 一个字符串只包含K和D。K表示杀人,D表示死亡。计算连续杀敌次数,阵亡则归零。
- 代码大全阅读笔记01
- day11_用例执行顺序、跳过用例skip用法
- zufeoj 分数线划定
- 去重+排序板子(set+map)
- 使用Spring.Net对Web页面进行依赖注入
- EVE-NG安装步骤
- 蛮力法在求解凸包问题中的应用(JAVA)
- TCP close_wait内幕