webpack4 自学笔记四(style-loader)
全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/css
引入--loader
npm install style-loader css-loader --save-dev
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'
}
]
}
]
}
}
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
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;
}
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)的更多相关文章
- webpack4 自学笔记五(tree-shaking)
全部的代码及笔记都可以在我的github上查看, 欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/ThreeS ...
- webpack4 自学笔记三(提取公用代码)
全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...
- webpack4 自学笔记二(typescript的配置)
全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typesc ...
- webpack4 自学笔记一(babel的配置)
所有代码都可以再我的github上查看,每个文件夹下都会有README.md,欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree ...
- Webpack4 学习笔记四 暴露全局变量、externals
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...
- spring boot 自学笔记(四) Redis集成—Jedis
上一篇笔记Reddis集成,操作Redis使用的是RedisTemplate,但实际中还是有一大部分人习惯使用JedisPool和Jedis来操作Redis, 下面使用Jedis集成示例. 修改Red ...
- vue 自学笔记记录
vue 自学笔记(一): 知识内容: 安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...
- 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...
- 《MFC游戏开发》笔记四 键盘响应和鼠标响应:让人物动起来
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9327377 作者:七十一雾央 新浪微博:http:// ...
随机推荐
- Hbase_shell操作
创建表 create 'user_action_table', 'action_log', 'action'-- 执行结果=> Hbase::Table - m_table 描述表信息 desc ...
- HDU2955 01背包
http://acm.hdu.edu.cn/showproblem.php?pid=2955 题目大意:给你一个劫匪抢银行的最高安全概率,给你银行得到钱数,和劫匪在这个银行可以逃跑的概率,问你最多能抢 ...
- ListView 指定显示最后一行,scrollView显示最底部
实现方式: 一. mListView.setSelection(adapter.getCount()-1); 二.在ListView的xml添加以下属性: android:stackFromBotto ...
- Chubby是什么?
先简单的理解,以后补充: 为了解决hadoop分布式系统的一致性问题 ,有很多人提出很多protocol,其中就有有名的Paxos算法(Latex作者提出,算法需要学习), 但是Chubby并不是一个 ...
- ReLU 和sigmoid 函数对比
详细对比请查看:http://www.zhihu.com/question/29021768/answer/43517930 . 激活函数的作用: 是为了增加神经网络模型的非线性.否则你想想,没有激活 ...
- C# WPF 用MediaElement控件实现视频循环播放
在WPF里用MediaElement控件,实现一个循环播放单一视频的程序,同时可以控制视频的播放.暂停.停止. 一种方式,使用MediaElement.MediaEnded事件,在视频播放结束后,自动 ...
- Ubuntu修改apt-get源
1.背景 服务器上安装了最新的Ubuntu Server 17.04,代号为zesty.使用apt-get命令安装软件时,有时候速度比较慢,有时候会失败.因此考虑用国内的镜像源更换下apt-get的默 ...
- [Swift]lower_bound和upper_bound
时间复杂度:一次查询O(log n),n为数组长度. [C++] lower_bound:返回大于等于val的第一个值 功能:查找非递减序列[first,last) 内第一个大于或等于某个元素的位置. ...
- 组件基础(参数校验和动态组件、v-once)—Vue学习笔记
最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...
- linux的RPM软件包管理工具
RPM(Redhat Package Manage)原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采 ...