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:// ...
随机推荐
- CSS 基础 优先级 选择器 继承
1.样式优先级 (内联样式)Inline style > (内部样式)Internal style sheet > (外部样式)External style ...
- Android-Kotlin-区间与for&List&Map简单使用
区间与for: package cn.kotlin.kotlin_base04 /** * 区间与for */ fun main(args: Array<String>) { /** * ...
- 多条件情况查询,sql select case when when else
多条件情况查询 SELECT Title, 'Price Range' = CASE WHEN price IS NULL THEN 'Unpriced' ...
- js怎么样根据select的name取到值
先看一下ASP.NET MVC的html: 在jQuery中,可以写:
- solr 5.5使用 和pyg里 的4.10.3版 部署到tomcat中不一样(不使用内置jetty)
http://www.cnblogs.com/zhuxiaojie/p/5764680.html
- new关键字创建对象带不带{}的区别
gson通过TypeToken实现了对泛型数据的支持,使用方式如下: gson.fromJson([待转化的字符串], new TypeToken<[目标类]<目标类中的泛型>> ...
- 01-Python的基础知识2
- Python变量 - 变量就是重复使用的一个量,或者一个代号. - 变量的命名规则: - 必须以下划线或者字母开头,后面接任意数量下划线.字母.或数字. - 4man , 5for 是不可以的 - ...
- linux系统坏了,进不了登陆界面怎么办?
装oracle时,命令弄错了,结果系统崩溃之后就进不去系统了,启动后光标一直在闪烁,就是不显示登陆界面. 网上查了很多,什么grub引导之类的,完全没办法恢复系统. 系统坏了倒是无所谓,主要是系统上还 ...
- 原生js,jquery ajax请求以及jsonp的调用
ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 ...
- java中result和resultSet
ResultSet: 1,定义 public interface ResultSet 表示数据库结果集的数据表,通常通过执行查询数据库的语句生成. 2,获得 State ...