全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/css

引入--loader

style-loader: 创建一个style标签
style-loader/url: 在html中插入一个link标签(配合file-loader使用),一个很小众的功能,会把每个import的css都处理成一个link标签,造成加载资源的增加,不利于优化
file-loader: 生成一个新的css文件
style-loader/useable: 在style中控制样式插入或者不插入,import了css后可以使用 .use() 或者 .unuse()的方法来控制样式是否插入
css-loader: 允许js来import一个css文件
 
npm install style-loader css-loader --save-dev

  

1. 使用style-loader 和 css-loader 在html中添加style标签,并引入import中的样式
 
var path = require('path')

module.exports = {
entry: {
app: './src/app.js'
}, output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
}, module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
}
]
}
}

  

2. style-loader配合file-loader 使用在html中插入link标签并引入js中import的样式,注意:publicPath为指定打包后文件的路径

var path = require('path')

module.exports = {
mode: 'production',
entry: {
app: './src/app.js'
}, output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: '[name].bundle.js'
}, module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader/url'
},
{
loader: 'file-loader'
}
]
}
]
}
}

  

3. 使用style-loader/useable
 
var path = require('path')

module.exports = {
mode: 'production',
entry: {
app: './src/app.js'
}, output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: '[name].bundle.js'
}, module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader/useable'
},
{
loader: 'css-loader'
// loader: 'file-loader'
}
]
}
]
}
}

  

##  style-loader 的一些常用配置 options

1.  insertAt: 插入位置

2. singleton: 是否只使用一个style标签,会将多个引入混合为一个style标签插入页面

{
loader: 'style-loader',
options: {
singleton: true
}
}

  

3.  insertInto: 插入到dom

按照文档来写尝试失败: 文档地址
[style-loader](https://www.npmjs.com/package/style-loader)  欢迎留言一起研究  
 
4.  transform: 可以执行一个js,在loader执行的时候执行,也就是浏览器环境,能拿到浏览器的相关信息
 
transform.js :
module.exports = function(css) {

    if(window.innerWidth > 400) {
// css += 'html{background: aqua;}'
css = css.replace('red', 'aqua')
}else {
css = css.replace('aqua', 'red')
}
console.log(css);
return css;
}

  

webpack配置:
var path = require('path')

module.exports = {
mode: 'production',
entry: {
app: './src/app.js'
}, output: {
path: path.resolve(__dirname, 'dist'),
// publicPath: './dist/',
filename: '[name].bundle.js'
}, module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
singleton: true,
transform: './src/css/transform.js',
}
},
{
loader: 'css-loader'
// loader: 'file-loader'
}
]
}
]
}
}

  

webpack4 自学笔记四(style-loader)的更多相关文章

  1. webpack4 自学笔记五(tree-shaking)

    全部的代码及笔记都可以在我的github上查看, 欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/ThreeS ...

  2. webpack4 自学笔记三(提取公用代码)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...

  3. webpack4 自学笔记二(typescript的配置)

    全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typesc ...

  4. webpack4 自学笔记一(babel的配置)

    所有代码都可以再我的github上查看,每个文件夹下都会有README.md,欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree ...

  5. Webpack4 学习笔记四 暴露全局变量、externals

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...

  6. spring boot 自学笔记(四) Redis集成—Jedis

    上一篇笔记Reddis集成,操作Redis使用的是RedisTemplate,但实际中还是有一大部分人习惯使用JedisPool和Jedis来操作Redis, 下面使用Jedis集成示例. 修改Red ...

  7. vue 自学笔记记录

    vue 自学笔记(一): 知识内容:  安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...

  8. 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...

  9. 《MFC游戏开发》笔记四 键盘响应和鼠标响应:让人物动起来

    本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9327377 作者:七十一雾央 新浪微博:http:// ...

随机推荐

  1. hdu 4882 比赛罚时贪心

    http://acm.hdu.edu.cn/showproblem.php?pid=4882 就是CF的比赛,根据时间的推迟会相应的扣掉题目的分数,每个任务有e,k,e表示完成需要时间,k表示完成后消 ...

  2. poj3924

    题目:给定一个起点(xw1, yw1),直线经过(xw2, yw2),速度为vw无限运动的点,还有一个起点(xt1, yt1),终点(xt2, yt2),并且在以vt速度在两者往返运动,求两者在运动中 ...

  3. 对java高级程序员有益的十本书

    英文原文:http://www.programcreek.com/2013/08/top-books-for-advanced-level-java-developers/ java语言是当今最受欢迎 ...

  4. Android-Retrofit-2.0-Post与Get-请求有道词典翻译

    Retrofit-2.0版本后,内置已经集成了OKHttp,在使用Retrofit的时候 看似是Retrofit去网络请求的 实际上Retrofit只是封装,所以不要以为Retrofit是网络请求框架 ...

  5. java 注释annotation学习---两篇不错的blog

    深入理解Java:注解(Annotation)自定义注解入门 ---- http://www.cnblogs.com/peida/archive/2013/04/24/3036689.html 深入理 ...

  6. poj 2262 Goldbach's Conjecture

    素数判定...很简单= =.....只是因为训练题有,所以顺便更~ #include<cstdio> #include<memory.h> #define maxn 50000 ...

  7. WPF 内存泄漏优化经历

    最近公司有个CS客户端程序,有个登录界面,有个程序的主界面,程序支持注销功能,但是在注销后,客户端的内存一直以40M-50M的速度递增,因此猜测,应该是WPF程序出现了内存泄漏.下面主要记录优化内存泄 ...

  8. 【转】JS浮点数运算Bug的解决办法

    37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一 ...

  9. 面向对象总结、configparser配置文件模块、logging日志模块

    面向对象总结 # 学习态度# python基础 2个月# html css js jq 1个月 # 上课困 # 学习方法 :# 列出知识点# 例子 写了哪些 # 面向对象学了哪些块# 为什么要讲面向对 ...

  10. for,while陈述

    今天我们来说一下for 和while循环 Python循环语句的控制结构图如下所示: for 是Python程序员使用最多的语句,for 循环用于迭代容器对象中的元素,这些对象可以是列表.元组.字典. ...