全部的代码及笔记都可以在我的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. Hbase_shell操作

    创建表 create 'user_action_table', 'action_log', 'action'-- 执行结果=> Hbase::Table - m_table 描述表信息 desc ...

  2. HDU2955 01背包

    http://acm.hdu.edu.cn/showproblem.php?pid=2955 题目大意:给你一个劫匪抢银行的最高安全概率,给你银行得到钱数,和劫匪在这个银行可以逃跑的概率,问你最多能抢 ...

  3. ListView 指定显示最后一行,scrollView显示最底部

    实现方式: 一. mListView.setSelection(adapter.getCount()-1); 二.在ListView的xml添加以下属性: android:stackFromBotto ...

  4. Chubby是什么?

    先简单的理解,以后补充: 为了解决hadoop分布式系统的一致性问题 ,有很多人提出很多protocol,其中就有有名的Paxos算法(Latex作者提出,算法需要学习), 但是Chubby并不是一个 ...

  5. ReLU 和sigmoid 函数对比

    详细对比请查看:http://www.zhihu.com/question/29021768/answer/43517930 . 激活函数的作用: 是为了增加神经网络模型的非线性.否则你想想,没有激活 ...

  6. C# WPF 用MediaElement控件实现视频循环播放

    在WPF里用MediaElement控件,实现一个循环播放单一视频的程序,同时可以控制视频的播放.暂停.停止. 一种方式,使用MediaElement.MediaEnded事件,在视频播放结束后,自动 ...

  7. Ubuntu修改apt-get源

    1.背景 服务器上安装了最新的Ubuntu Server 17.04,代号为zesty.使用apt-get命令安装软件时,有时候速度比较慢,有时候会失败.因此考虑用国内的镜像源更换下apt-get的默 ...

  8. [Swift]lower_bound和upper_bound

    时间复杂度:一次查询O(log n),n为数组长度. [C++] lower_bound:返回大于等于val的第一个值 功能:查找非递减序列[first,last) 内第一个大于或等于某个元素的位置. ...

  9. 组件基础(参数校验和动态组件、v-once)—Vue学习笔记

    最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...

  10. linux的RPM软件包管理工具

    RPM(Redhat Package Manage)原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采 ...