The way of Webpack learning (IV.) -- Packaging CSS(打包css)
一:目录结构
二:webpack.config.js的配置
const path = require('path');module.exports = {mode:'development',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'//style-loader作用:主要创建style标签,把css插入html代码中。<style></style>//如果想要插入link标签,去引入css的话,使用style-loader/url。<link href="path/to/file.css" rel="stylesheet">},{loader:'css-loader'//css-loader先执行,放在后面的先执行。//css-loader作用:解决import css的问题,把css代码打包到js代码里面。一般情况下,css不能使用import导入//file-loader作用:可以把css和js分别打包成两个文件。}]}]}
}
三:其他文件配置
//app.js
import './css/base.css'
到这里,一个正常的打包css过程就完成了。下面介绍一个这些loader的属性,让我们的使用更灵活。
四:style-loader/useable
//app.js
import base from './css/base.css'
import common from './css/common.css'base.use();//渲染base.css
common.unuse();//不渲染common.css//webpack.config.js 修改loader
loader:'style-loader/useable'
五:style-loader的实现原理
//简易的style-loader实现//将css插入到head标签内部
module.exports = function (source) {let script = (`let style = document.createElement("style");style.innerText = ${JSON.stringify(source)};document.head.appendChild(style);`);return script;
}
//使用方式1
resolveLoader: {modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{test: /\.css$/,use: ['style-loader']
},
//使用方式2
将自己写的loaders发布到npm仓库,然后添加到依赖,按照方式1中的配置方式使用即可
六:css-loader的实现原理(待完善)
七:提取css:ExtractTextWebpackPlugin
八:更强大的处理css代码的loader:postcss
九:怎么开发一个新的loader?
转载于:https://www.cnblogs.com/weihuan/p/9642475.html
The way of Webpack learning (IV.) -- Packaging CSS(打包css)相关推荐
- webpack打包css和less文件
1. 前言 webpack是不能直接处理 css .less.图片等资源的,需要使用对应的 loader ,有关loader的介绍请查看这篇博客 webpack中的loader 2. 打包css文件 ...
- gmod的css模块放哪里,webpack打包css报错找不到模块?
环境:webpack3.10.0 webpack.config.js配置如下: const path = require('path'); const HtmlWebpackPlugin = requ ...
- webpack打包css文件
CSS打包 安装style-loader和 css-loader Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader ...
- webpack 独立打包 css 文件
插件地址: extract-text-webpack-plugin 安装插件 npm install extract-text-webpack-plugin –save-dev 使用方法,在 webp ...
- html图片分开,webpack单独分离打包css,css里引用的图片路径错误,怎么解决?
现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致. 打包前: 从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如 ...
- webpack css打包为一个css
1.安装 npm install extract-text-webpack-plugin --save-dev 2.项目目录: index文件夹下的index.css: body{background ...
- webpack打包样式资源_使用loader去打包css文件_打包less文件---webpack工作笔记004
然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是不能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 ...
- Webpack打包css文件-css-loader+style-loader
一,前言 之前"webpack介绍"一篇中提到webpack的四个核心概念:entry-入口,output-出口,loader-加载器,plugins-插件前面打包和输出文件使用了 ...
- webpack打包css image,webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
最新文章
- 分布式事务 GTS 的价值和原理浅析
- 36晋级12第四场:评委弃权 无人晋级
- 【安全报告】揭秘创建进程时ebx为什么指向peb的答案
- SQL Server 2005中, 创建维护计划时出现错误信息: 创建维护计划 失败
- 双圆环环布带系法图解_库卡(kuka)机械臂KR210结构图解
- 技术实践 | ICDE2021-大规模知识图谱预训练及电商应用
- codeforces B. Strongly Connected City(dfs水过)
- 这样的问题代码,我实习的时候都写不出来!
- git 代理 git_五分钟解释Git的要点
- Oracle笔记 五、创建表、约束、视图、索引、序列、同义词、表空间
- HTTP服务器恢复文件头,浅谈“Web服务器解析漏洞”
- CentOS4.4平台下安装EXTMAIL手记V1.3
- python最适合做什么-python学完之后比较适合哪些职业工作呢?
- 包含h3c、cisco、F5、华为、中兴、juniper等网络设备巡检命令整理,建议点赞收藏
- Money is not everthing
- 基于MyEclipse+JSP+Mysql+Tomcat开发得塞北村镇旅游网站设计
- 增粉的各种方法【微信 / 微博 增加粉丝的108种方法】
- 线性代数标准型矩阵化简技巧
- 你的 Mac 用对了吗?推荐一些 Mac 上比较好用的软件
- office word 使用快捷键ctrl c ctrl v提示文件未找到:MathPage.WLL