loader概念:

首先来介绍一下loader,之前我们用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖。
但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css、图片,也包括一些高级的将ES6转成ES5代码,
将TypeScript转成ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件等等。
对于webpack本身的能力来说,对于这些转化是不支持的。
这个时候就给webpack扩展了loader来处理这些文件。
loader使用步骤:
步骤一:通过npm安装需要使用的loader
步骤二:在webpack.config.js中的modules关键字下进行配置
目录结构:

在src目录中,创建一个css文件,其中创建一个normal.css文件。
我们也可以重新组织文件的目录结构,将零散的js文件放在一个js文件夹中。
normal.css中的代码非常简单,就是将body设置为red
但是,这个时候normal.css中的样式不会生效,因为我们还没有引用它。
webpack也不可能找到它,因为我们只有一个入口,webpack会从入口开始查找其他依赖的文件。

重新打包,会出现如下错误:

这个错误告诉我们:加载normal.css文件必须有对应的loader

安装loader:

npm install --save-dev css-loader
npm install style-loader --save-dev

同时在webpack.config.js中配置如下:

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

css-loader只负责加载css文件,style-loader负责将css具体样式嵌入到文档中,少了两个中的任何一个css文件都不会生效
最终的webpack.config.js文件如下:
const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package.json

module.exports = {  //导出入口和出口路径
entry: './src/main.js', //入口文件
output: { // 动态获取路径
path: path.resolve(__dirname, 'dist'), // resolve拼接路径 __dirname是node自带全局变量,保存现在项目的路径
filename: 'bundle.js'
},
//模块:例如解读CSS,图片如何转换,压缩
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
//插件,用于生产模版和各项功能
plugins:[ ],
//配置webpack开发服务功能
devServer:{ }
}
 

webpack CSS处理loader的更多相关文章

  1. webpack配置常用loader加载器

    webapck中使用loader的方法有三种 使用loader之前必须运行安装 : npm install --save-dev xxx-loader (1)通过CLI : 命令行中运行 webpac ...

  2. webpack css打包为一个css

    1.安装 npm install extract-text-webpack-plugin --save-dev 2.项目目录: index文件夹下的index.css: body{ backgroun ...

  3. webpack 3.x loader

    css-loader webpack配置 module:{ rules:[ { test:/\.css$/, use:['style-loader',css-loader] //顺序不能变 } ] } ...

  4. webpack css文件编译、自动添加前缀、剥离

    1.css文件编译 webpack默认只能编译js文件,引入css需要loader支持 // css文件写入js中 npm i style-loader -D // css文件loader npm i ...

  5. webpack系列之loader的基本使用

    可以访问 这里 查看更多关于大数据平台建设的原创文章. webpack系列之loader及简单的使用 一. loader有什么用 webpack本身只能打包Javascript文件,对于其他资源例如  ...

  6. 初探webpack之编写loader

    初探webpack之编写loader loader加载器是webpack的核心之一,其用于将不同类型的文件转换为webpack可识别的模块,即用于把模块原内容按照需求转换成新内容,用以加载非js模块, ...

  7. Css Js Loader For Zencart

    Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...

  8. webpack配置css相关loader注意先后顺序

    一.问题描述 在webpack3中,引入animate.css失败. 二.问题分析 1.难道是入口main.js引用方式不对? import animate from 'animate.css' 2. ...

  9. webpack css loader 使用

    备注:   接上面的项目 1. 添加css  main.css #app { text-align:center; } main.js require("./main.css"); ...

随机推荐

  1. js初步简单的编程代码

    简单图片切换编码demo图片地址自行替换 简单图片切换编码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. CSU 1554 SG Value (multiset/priority queue 思维题)

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1554 Description The SG value of a set (mult ...

  3. ubuntu 16.4下hadoop配置伪分布式时出现的坑

    在ubuntu16.4下spark的单机/伪分布式配置我在此就不在一一赘述,详情请点击如下连接: Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04 我出现问题是 ...

  4. matlab: undocumented sprintfc

    今天本想找一个类似于 R 中 paste 的 matlab 函数, 结果在 stackoverflow 上找到一个叫 sprintfc 的函数 (http://stackoverflow.com/qu ...

  5. vscode左侧文件不同颜色标识含义

    代码里的左侧颜色标识: 红色,未加入版本控制; (刚clone到本地)绿色,已经加入版本控制暂未提交; (新增部分)蓝色,加入版本控制,已提交,有改动: (修改部分)白色,加入版本控制,已提交,无改动 ...

  6. 聊聊redis的监控工具

    序 本文主要研究一下redis的监控工具 redis-stat redis-stat是一个比较有名的redis指标可视化的监控工具,采用ruby开发,基于redis的info命令来统计,不影响redi ...

  7. python实现读取配置文件

    实现代码如下: # 读取配置文件,取其值组成列表class ReadTxt: def read_txt(self,path): li_info = [] with open(path) as f: l ...

  8. httpclient模拟服务器请求

    // 创建默认的httpClient实例. CloseableHttpClient httpclient = HttpClients.createDefault(); // 创建httppost Ht ...

  9. SAP smartforms打印数据出框线或跟框线重叠,但是预览是正常的

    如图,打印内容压在框线上,但是打印预览是正常的 预览图如下,预览是正常的 预览用PDF!命令,导出PDF,也是正常的,就直接打印有问题,不是打印机的问题,用Adobe PDF打印机也是不行 如果只有一 ...

  10. JS对像和数组的遍历

    零. 通用遍历方法 0.1 for...in... let obj = {0:"a", 1:"b", 2:"c"}; for (let ke ...