webpack的CSS加载器的使用

什么是loader

loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件。

loader的解析

loader的解析类似模块,一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里。

webpack中常用的加载器

css-loader 处理css中路径引用等问题

用于在js中加载css,解释@import和url()

options

alias: 解析别名

importLoaders(@import): 在css-loader前应用的loader的数目,默认为0

Minimize: true or false 是否开启css代码压缩,比如压缩空格不换行

modules: 是否开启css-module

module.exports = {
 ...
 module: {
  rules: [{
   test: /\.css$/,
   use: ['style-loader', {
    loader: 'css-loader',
    options: {//当css文件中又引用了其他的css的时候,需要设置importLoaders
     importLoaders: 1
    }
   }]
  }]
 }
};

style-loader 动态把样式写入css

加载的css作为style标签内容插入到html中,以<style></style>形式在html页面中插入css代码

options

insertAt: 插入位置

insertInto: 插入到指定的dom

singleton: true or false,多个样式是否只生成一个<style></style>标签

postcss-loader

postcss-loader:为了浏览器的兼容性,有时候我们必须加上-webkitm, -ms, -moz等前缀。目的就是让页面可以在每个浏览器上正常运行。postcss是一个CSS的处理平台可以帮CSS实现更多的功能。

用法:

安装postcss: npm install postcss-loader autoprefixer

配置文件

webpack.config.js:

module: {
 rules: [{
  test: /\.css$/
  loader: 'style-loader!css-loader!postcss-loader'
 }]
}

postcss.config.js

module.exports = {
 plugins: [
  require('autoprefixer')//在postcss-loader中引入autoprefixer插件
 ]
}

或者

const autoprefixer = require('autoprefixer');
module: {
 rules: [{
  test: /\.css$/,
  use: ['style-loader', 'css-loader', {
   loader: 'postcss-loader',
   options: {
    plugins() {
     return [autoprefixer];
    }
   }
  }]
 }]
}

less-style

添加对webpack的LESS支持。当遇到less文件时,先交给less-loader处理,然后交给css-loader,最后交由style-loader处理,然后执行webpack打包

module: {
 rules: [{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
 }]
}

要启用CSS的source map,你需要将sourceMap选项传递给less-loader和css-loader

CSS SourceMap信息文件,里面存储着位置信息。随着代码增多,我们会对代码进行压缩,代码压缩之后进行调bug定位会非常困难,于是引入sourceMap记录压缩前后的位置信息,当产生错误时直接定位到未压缩前的位置,方便调试。简单来说就是记录压缩的翻译文件,通过这个文件可以找到你的对应源码

module.exports = {
 ...
 module: {
  rules: [{
   test: /\.less$/,
   use: ['style-loader', 'css-loader', {
    loader: 'less-loader',
    options: {
     sourceMap: true
    }
   }]
  }]
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • webpack项目轻松混用css module的方法

    前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css module. 一.产生问题的原因 { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, localIdentName: '[hash:base64:6]' } }, 'pos

  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **

  • webpack4 处理CSS的方法示例

    这节课讲解webpack4中打包css的应用.v4 版本和 v3 版本并没有特别的出入. 1. 准备工作 众所周知,CSS 在 HTML 中的常用引入方法有<link>标签和<style>标签两种,所以这次就是结合webpack特点实现以下功能: 将 css 通过 link 标签引入 将 css 放在 style 标签里 动态卸载和加载 css 页面加载 css 前的transform 下图展示了这次的目录代码结构: 这次我们需要用到css-loader,file-loader等

  • webpack与SPA实践之管理CSS等资源的方法

    上一篇介绍了如何使用webpack搭建一个稳定的支持本地服务.自动刷新.模块热替换.使用ES6编写JavaScript的开发环境,本篇主要介绍webpack如何处理HTML应用三大元素的另一元素 – CSS及其他诸如图片.字体文件或者数据配置文件等资源. 前言 在学习使用webpack时,我们需要明白无论它怎么设计,它的工作原理.流程是什么,最根本的它处理的还是HTML文档中的HTML标签.JavaScript.CSS.图片等资源,而且最终的处理结果依然必须是一个HTML文档,包括DOM.Jav

  • 详解webpack分离css单独打包

    这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法. 瞎扯 webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中. 但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中 一.extract-text-webpack-plugin 使用方法 这个操作很简单的,只需要一个插件就好了,就是e

  • webpack4 处理SCSS的方法示例

    这节课讲解webpack4中处理scss.只需要在处理css的配置上增加编译scss的 LOADER 即可. 1. 准备工作 为了方便叙述,这次代码目录的样式文件只有一个scss文件,以帮助我们了解核心 LOADER 的使用. 下图展示了这次的目录代码结构: 目录结构 这次我们需要用到node-sass,sass-loader等 LOADER,package.json如下: { "devDependencies": { "css-loader": "^1.

  • webpack 打包压缩js和css的方法示例

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令 webpack -p 即表示调用UglifyJS来压缩代码,还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS. uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用开发分支. UglifyJS可用的选项有: parse      

  • webpack4 css打包压缩问题的解决

    这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, // webpack.config.js module.exports = { // webpack会根据mode进行对Js打包,development压缩,production下面自动压缩,亲测没有问题 mode: 'development' // productio

  • webpack4 SCSS提取和懒加载的示例

    本节课讲解在webpack v4中的 SCSS 提取和懒加载.值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别. >>> 本节课源码 >>> 所有课程源码 1. 准备工作 关于 SCSS 处理的基础,请参考webpack4 处理 SCSS. 本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用. 下图展示了这次的目录代码结构: 为了实现 SCSS 懒加载,我们使用了extract-text-webpack-plugin插件. 需要注意,在安

  • webpack2.0配置postcss-loader的方法

    本文介绍使用webpack2.0配置postcssloader,分享给大家.具体如下: 安装postcss-loader npm install --save-dev postcss-loader 然后配置webpack.config.js { test:/\.css$/, use:[ 'style-loader','css-loader?importLoaders=1','postcss-loader' ] } 一种办法是配置postcss.config.js module.exports =

随机推荐