webpack实战——样式文件分离

前言

这是webpack实战系列笔记的第7篇记录——分离样式,前几篇记录如下:

  • 打包第一个应用
  • 模块化与模块打包
  • 资源输入与输出
  • 一切皆模块
  • 预处理器【上篇】
  • 预处理器——常用loader【下篇】

在之前篇章里面主要是对js的打包应用和处理,而打包方面另外一个重要工作就是样式处理

在实际工程中,如果项目具有一定规模,那么CSS的维护成本则会比较高昂,这个时候就需要更友好且更低价的方式来处理样式问题。本篇介绍webpack结合样式编辑器、转换器及相关插件来提升样式方面的开发效率。

分离样式

1. 分离样式文件概念

在之前写的简单demo中,处理过关于CSS,并且在预处理器篇介绍过关于CSS的预处理器:style-loader和css-loader。通过JS引入CSS样式去打包,在编写阶段可以直观的描述出来模块之间的依赖关系。

但是问题随之而来:在打包后,我们对css样式的添加,是通过标签<style>来引入的,可生产环境下,一般我们希望样式存在于CSS文件中而不是style标签中,因为文件更有利于客户端进行缓存。那么我们怎么输出单独的CSS文件呢?

2. mini-css-extract-plugin

“该插件主要是用于提取样式到CSS文件的。

特性:

  • 可处理多样式文件
  • 支持按需加载

3 安装

两种方式 选择一种即可

yarn add mini-css-extract-plugin
// 或
npm install mini-css-extract-plugin

4. 举例

举个例子:

a.js引入自身a.css样式,并引入b.js,而b.js也有自身相应的b.css样式,那么最终样式会被同步加载,通过index.html的link标签加载进来。

a.js

import './a.css'
import './b.js'

document.write('A.JS<br/>');

a.css

body{
    background: deepskyblue;
}

b.js

import './b.css'

document.write('B.JS<br/>');

b.css

body{
    background: thistle;
}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: {
        index: './src/a.js',
    },

    output: {
        filename: '[name].js'
    },
    mode: 'development',

    // loader配置
    module: {
        rules: [
            // css
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            }
        ],        
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ]
}

打包

yarn build
// 或
npm run build

build

HTML引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./dist/index.css">
    <title>style</title>
</head>
<body>
    
    <script src="./dist/index.js"></script>
</body>
</html>

运行结果

运行引入了脚本和样式的HTML文件,查看结果:

结果

小结

其实本篇就是单独拎出来了一个loader预处理器来介绍:mini-css-extract-plugin。目的就是生产环境下,通过link引入样式存在于CSS文件中而不是style标签中,这样更有利于客户端进行缓存。

下一篇介绍样式预处理

本文分享自微信公众号 - 流眸(zxm0146),作者:流眸

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 解决vue打包报错UglifyJs

    在vue配置中,由于各插件版本兼容性差异可能会引发此问题的产生。 UglifyJs是一款可以解析、混淆、压缩JS的工具,此处的UglifyJs是配置在脚手架/w...

    流眸
  • webpack实战——代码分片

    对于web应用来说通常会有一些库和工具是不常变动的,可以将它们放在一个单独的入口中,由该入口产生的资源不会经常更新,因此可以有效地利用客户端缓存,让用户不必在每...

    流眸
  • vue项目搭建及基本配置

    准备阶段会将项目环境配置完毕,包含 node、 npm、 webpack和 vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。

    流眸
  • Webpack第四天

    在开发的时候,我们不仅仅需要改变js的时候去热更新,改变样式和HTML的时候同样要热更新。

    wade
  • HTML中css和js链接版本号的用途

    在搜索引擎中搜索关键字 .htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样...

    阳光岛主
  • HTML中css引入之import

    如admin.css和layui.css 这两个css.每个页面都需要使用,如果每个页面都引入两个,是不是很麻烦,这个时候,我们就也有使用@import这个了。

    凯哥Java
  • WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)

    在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下...

    Jeff
  • WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)

    在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下...

    Jeff
  • 浏览器默认样式、1px边框问题、css预编译

    参考链接: 移动端1px解决方案 vue-cli css相关 normalize.css

    Ewall
  • 如何更优雅的编写CSS代码

    直白的说:编写优秀的 css 代码可能是很痛苦的。很多程序员都不想从事 CSS 开发—我可以做任何事情,除了css以外。

    icepy

扫码关注云+社区

领取腾讯云代金券