写在前面:为了兼容,此处的webpack版本为3.6.0、webpack-dev-server版本为2.9.7、css-loader版本为2.0.0、style-loader版本为0.23.1,若在下列安装后运行出错,一般是版本问题,可以安装此处的指定版本来解决。

1.前言

webpack把多个文件打包到一个js里,可以减少http的请求数。要完成CSS打包之,需要完成对webpack.config.js文件里的Loaders配置项进行针对性的配置。

1.1 Loaders

Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。通过使用不同的Loader,Webpack可以对不同的文件格式进行特定处理。

Loaders使用例子:

(1)分析JSON文件并把它转换为JavaScript文件;

(2)以把ES6或者ES7的代码,转换成大多浏览器兼容的JS代码;

(3)对React的开发而言,合适的Loaders可以把React的JSX文件转换为JS文件。

(4)可以把SASS文件的写法转换成CSS,而不在使用其他转换工具等。

注意:所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置,Loaders的配置项包括有:

认识了Loaders相关信息之后,我们开始考虑如何打包CSS文件。

2.打包css文件

2.1 建立index.css文件

要打包css,首先得有个css文件,在/src目录下,我们建立一个css文件夹,在文件夹里建立index.css文件。代码内容如下。

src/css/index.css:

body{
background-color: #018eea;
color: red;
font-size: 32px;
text-align: center;
}

css文件建立完成后,将其引入到入口文件中,才能实现打包,此节中我们把它引入到entry.js中,在src目录下的entry.js文件首行加入以下代码:

import css from './css/index.css'

当css引入完成后,我们就可以开始使用loader来解析css文件了,此处的解析需要两个loader分别是style-loader和css-loader。

2.2 style-loader安装

style-loader是用来处理css文件中的url(),style-loader在npm中网址

采用npm install进行项目安装(若失败,采用cnpm安装)

npm install style-loader --save-dev
--save-dev:表示将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖。

2.3 css-loader安装

css-loader是用来将css插入到页面的style标签,css-loader在npm中网址

采用npm install进行项目安装(若失败,采用cnpm安装),npm install 会默认安装最新的版本。

npm  install --save-dev css-loader

两个loader都下载安装好后,我们就可以在webpack.config.js文件里进行loaders配置工作了。

2.4 loaders配置

修改webpack.config.js中module属性中的配置代码如下:

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

loader的三种写法:

第一种写法:直接用use。

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

第二种写法:把use换成loader。

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

第三种写法:用use+loader的写法:

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

2.5 启动服务

在终端里输入 npm run server 打开服务器,访问我们上节配置的本地服务端口(localhost:1818),可以看到效果。

效果为:

附录此时项目目录结构:

(5/24) 模块化:实现快速CSS文件打包的更多相关文章

  1. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  2. webpack配置:css文件打包、JS压缩打包和HTML文件发布

    一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

  3. vue引入外部.css文件,webpack将其与.vue中的样式混合打包了,怎么办?

    我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...

  4. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  5. webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  6. webpack中css文件的代码分割

    module.exports = { output: { filename: '[name].js', chunkFilename: '[name].chunk.js', path: path.res ...

  7. 使用extract-text-webpack-plugin处理css文件路径问题

    首先看到我们的文件夹目录如下: webpack.config.js //解析分离cssconst ExtractTextPlugin = require('extract-text-webpack-p ...

  8. 前端资源多个产品整站一键打包&包版本管理(四)—— js&css文件文件打包并生成哈希后缀,自动写入路径、解决资源缓存问题。

    问题: 当我们版本更新的时候,我们都要清理缓存的js跟css,如何使得在网页中不需要手动清理呢? 答案: 生成带有哈希后缀的js跟css文件 1.文件路径 路径中的conf.js 是用于放置全局打包的 ...

  9. MVC打包压缩JS&CSS文件调试时过滤了一些文件

    BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件:   后台跟踪了 ...

随机推荐

  1. Java中如何拆分字符串为字符数组

    题目:输入一串字符,由(){}[]组成,判断是否所有的括号都是闭括号,是的返回TRUE,不是返回FALSE. /*输入字符串,拆解为字符数组 * 用函数s.charAt(i)来完成 * * */imp ...

  2. TEAMWORK1

    代码信息 队友:马司雨 队友项目:Prim算法生成最小生成树 codeing地址:这里 博客地址:那里 代码功能审查表 功能模块名称 Prim算法生成最小生成树 审查人 张洋 审查日期 2019.4. ...

  3. MyEclipse2017创建Spring项目

    1.创建一个Web Project 2.右击项目-->Properties 3.搜索Spring -->Peoject Facets-->在右边找到Spring,打勾并保存 4.测试 ...

  4. Linux第九节课学习笔记

    fdisk可添加.删除.转换分区. 创建主分区:n-p-w:扩展分区:n-e:逻辑分区:n-l. SWAP分区专用格式化命令mkswap,专用挂载命令swapon. 磁盘容量配额中,硬限制必须,软限制 ...

  5. 285款photoshop烟花笔刷

    这是一套非常漂亮的PS烟花笔刷,包含285款不同形状效果的笔刷样式,此套photoshop烟花笔刷非常容易使用,使用可以将它们用作照片叠加,用于数码照片处理,作为游戏或艺术品的视觉效果,以及作为装饰元 ...

  6. influxdb 全家桶运行

    一个简单的demo,集成了telegraf,influxdb,chronograf,kapacitor,nginx,一张来自官方的参考图 组件集成图 环境准备 使用docker-compose doc ...

  7. Python assert(断言)

    Python assert(断言)可以分别后面的判断是否正确,如果错误会报错 示例: a = 1 assert type(a) is int print('No problem') 输出结果: No ...

  8. Java面试题之Forward和Redirect的区别

    redirect:请求重定向:客户端行为,本质上为2次请求,地址栏改变,前一次请求对象消失.举例:你去银行办事(forward.jsp),结果告诉你少带了东西,你得先去公安局办(index.html) ...

  9. MQTT研究之EMQ:【wireshark抓包分析】

    基于上篇博文[SSL双向验证]的环境基础,进行消息的具体梳理. 环境基础信息: . 单台Linux CentOS7.2系统,安装一个EMQTTD的实例broker. . emq的版本2.3.11. . ...

  10. 【申嵌视频】基于VMWare虚拟机下安装ubuntu操作系统的详细步骤

    [申嵌视频]基于VMWare虚拟机下安装ubuntu操作系统 适合搭建mini2440, Tiny6410, smart210,Tiny4412, NanoPC-T2, NanoPC-T3, Nano ...