webpack配置css模块化

最新推荐文章于 2024-05-14 12:59:47 发布
最新推荐文章于 2024-05-14 12:59:47 发布
阅读量1.1k 收藏 3
点赞数 2
分类专栏： Webpack4.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44601948/article/details/105376768
版权

大纲

模块化css文件

文件目录

在这里插入图片描述

安装如下包

css-loader
style-loader

编写配置文件

// webpack.config.js

module:{ // 模块配置
        rules:[ //规则
            /*  css-loader 解析 @import这种语法
                style-loader 它是将css插入到head的标签中
                loader的执行顺序是从右向左执行
             */
            { 
                test:/\.css$/,
                use:[
                        {
                            loader:'style-loader',
                            options:{
                                insert:"top"  // 将style文件插入到最顶部,解决在index.html写<style>body{...}</style>被后面的覆盖
                            }
                        },
                        'css-loader'
                    ] 
            }
        ]
    }

index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
  </head>
  <body>
  </body>
</html>

编写index.css

// index.css

body{
    background-color: aquamarine;
}

在index.js文件引入

// index.js
const yang = require('./nodetest');

++++++++++++++++   require('./css/index.css');

function component() {
    var element = document.createElement('div');
    console.log(yang.log('引入模块文件测试'))
    element.innerHTML = '第一个webpackdemo'
    return element;
}
  
document.body.appendChild(component());

保存完，在webpack配置好server自动热更新就可以用了

效果

在这里插入图片描述

总的配置文件

// webpack.config.js

const path = require('path');
console.log(path.resolve(__dirname, 'dist')) // e:\big ---project\Webpack project\test01\dist

const HTMLPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development", //模式：  "production" | "development" | "none"
    entry: './src/index.js', //入口
    output: { // 输出
        filename: 'main.js', // 打包后的文件名字
        //filename: 'main.[hash].js', // 打包后的文件名字变成带有哈希值
        //filename: 'main.[hash:8].js', // 文件的哈希值只显示8位
        path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径,  --dirname：是使用当前目录出生成一个dist文件夹
    },
    devServer: { // 开发服务配置
        port: 3000,
        progress: true, // 是否显示加载进度条
        contentBase: './dist', // 映射地址
        compress:true  // 是否压缩
    },
    plugins: [ // 附加插件
        new HTMLPlugin({
            template:'./src/index.html', // 模板文件
            filename:'index.html',  // 打包出来的文件名
            minify:{
                removeAttributeQuotes:true, // 删除html页面的双引号
                collapseWhitespace:true,  // 将html页面压缩成一行
            },
            hash:true  // 将文件打包成哈希包
        })
    ],
    module:{ // 模块配置
        rules:[ //规则
            /*  css-loader 解析 @import这种语法
                style-loader 它是将css插入到head的标签中
                loader的执行顺序是从右向左执行
             */
            { 
                test:/\.css$/,
                use:[
                        {
                            loader:'style-loader',
                            options:{
                                insert:"top"  // 将style文件插入到最顶部,解决在index.html写<style>body{...}</style>被后面的覆盖
                            }
                        },
                        'css-loader'
                    ] 
            }
        ]
    }
};

能继续处理css预编译文件

这边举less为例，配置文件再加上个规则就OK了

// webpack.config.js

module: {
    rules: [ 
        {
            test: /\.css$/,
            use: [{
                    loader: 'style-loader',
                    options: {
                        insert: "top"
                    }
                },
                'css-loader'
            ]
        },
        { // 解析 less文件
            test: /\.less$/,
            use: [{
                    loader: 'style-loader',
                    options: {
                        insert: "top" 
                    }
                },
                'css-loader',
                'less-loader'
            ]
        }
    ]
}
};

将css编译后变成单个css文件

上述都是编译后直接写在html页面中的

因为我们使用了style-loader插件

安装如下包

mini-css-extract-plugin

然后修改配置文件

在这里插入图片描述

在这里插入图片描述

总的的配置文件

const path = require('path');
console.log(path.resolve(__dirname, 'dist')) // e:\big ---project\Webpack project\test01\dist

const HTMLPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "development", //模式：  "production" | "development" | "none"
    entry: './src/index.js', //入口
    output: { // 输出
        filename: 'main.js', // 打包后的文件名字
        //filename: 'main.[hash].js', // 打包后的文件名字变成带有哈希值
        //filename: 'main.[hash:8].js', // 文件的哈希值只显示8位
        path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径,  --dirname：是使用当前目录出生成一个dist文件夹
    },
    devServer: { // 开发服务配置
        port: 3000,
        progress: true, // 是否显示加载进度条
        contentBase: './dist', // 映射地址
        compress: true // 是否压缩
    },
    plugins: [ // 附加插件
        new HTMLPlugin({  // 打包html文件
            template: './src/index.html', // 模板文件
            filename: 'index.html', // 打包出来的文件名
            minify: {
                removeAttributeQuotes: true, // 删除html页面的双引号
                collapseWhitespace: true, // 将html页面压缩成一行
            },
            hash: true // 将文件打包成哈希包
        }),
        new MiniCssExtractPlugin({  // 打包css文件
            filename:"index.css" // 抽离出来的文件名字
        })
    ],
    module: { // 模块配置
        rules: [ //规则
            /*  css-loader 解析 @import这种语法
                style-loader 它是将css插入到head的标签中
                loader的执行顺序是从右向左执行
             */
            { // 解析 css文件
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            { // 解析 less文件
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
};

css自动添加前缀

将css内的属性自动添加前缀

安装如下包

npm install postcss-loader autoprefixer

然后修改配置文件

在这里插入图片描述

编写postcss.config.js文件

在这里插入图片描述

总的配置文件

const path = require('path');
console.log(path.resolve(__dirname, 'dist')) // e:\big ---project\Webpack project\test01\dist

const HTMLPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "development", //模式：  "production" | "development" | "none"
    entry: './src/index.js', //入口
    output: { // 输出
        filename: 'main.js', // 打包后的文件名字
        //filename: 'main.[hash].js', // 打包后的文件名字变成带有哈希值
        //filename: 'main.[hash:8].js', // 文件的哈希值只显示8位
        path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径,  --dirname：是使用当前目录出生成一个dist文件夹
    },
    devServer: { // 开发服务配置
        port: 3000,
        progress: true, // 是否显示加载进度条
        contentBase: './dist', // 映射地址
        compress: true // 是否压缩
    },
    plugins: [ // 附加插件
        new HTMLPlugin({  // 打包html文件
            template: './src/index.html', // 模板文件
            filename: 'index.html', // 打包出来的文件名
            minify: {
                removeAttributeQuotes: true, // 删除html页面的双引号
                collapseWhitespace: true, // 将html页面压缩成一行
            },
            hash: true // 将文件打包成哈希包
        }),
        new MiniCssExtractPlugin({  // 打包css文件
            filename:"index.css" // 抽离出来的文件名字
        })
    ],
    module: { // 模块配置
        rules: [ //规则
            /*  css-loader 解析 @import这种语法
                style-loader 它是将css插入到head的标签中
                loader的执行顺序是从右向左执行
             */
            { // 解析 css文件
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            { // 解析 less文件
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            }
        ]
    }
};

css代码压缩

澜漾
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack之css模块化
coding...
05-04 4702
前言本文演示了如何开始css模块化；如何选择性的开启部分css文件的模块化功能；如何让模块化后写入html的class更具有可读性；涉及到的loader： css-loader、style-loader开启css-loader的模块化配置当前项目目录和package.json配置：：如何使css模块化？需要在我们的webpack.config.js中对css-loader进行一些额外设置。编辑ma...
webpack 中实现自动识别 CSS Modules
奇舞周刊
03-11 980
编者按：本文作者奇舞团前端开发工程师彭体奎背景在 React 项目中使用 CSS 时，如果不使用 CSS in JS 的方案，一般会直接在 JS 文件中导入一个 CSS 文件，比如 im...
webpack css工程化之css module
weixin_43324909的博客
04-15 1987
css module {ignore} 通过命名规范来限制类名太过死板，而css in js虽然足够灵活，但是书写不便。 css module 开辟一种全新的思路来解决类名冲突的问题 思路 css module 遵循以下思路解决类名的冲突问题： 1.css的类名冲突往往发生在大型项目中 2.大型项目往往会使用构建工具（webpack等）搭建工程 3.构建工具允许将css样式切分为更精细的模块 ...
前端工程化之：webpack3-5(css module)
m0_60189088的博客
02-06 1534
通过命名规范来限制类名太过死板，而 css in js 虽然足够灵活，但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题。
2024年最全webpack中使用的css文件的配置，2024年最新四轮面试成功率高吗
最新发布
2401_84446513的博客
05-14 285
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
webpack成长指北第8章---webpack的CSS Modules打包
博哥的二进制世界
07-07 655
webpack成长指北第8章---webpack的CSS Modules打包何为CSS Modules案例CSS模块化打包 何为CSS Modules CSS Modules，样式的模块化，实际上就是所有的类名都只有局部作用域的CSS文件，其有以下几个特点 所有样式都是局部化，解决命名冲突和全局污染的问题 class类名生成规则配置灵活，可以借此压缩class类名 只需引入组件的js,就能搞定组件所有的js和css 案例 我们先编写我们的项目代码 项目目录 index.html <!DO
Webpack: CSS 到 Sass/Scss 与 CSS Module
超悠閒的博客
08-07 1580
Webpack: CSS 到 Sass/Scss 与 CSS Module 文章目录Webpack: CSS 到 Sass/Scss 与 CSS Module前言正文1. 在 JS 中引入 CSS：style-loader、css-lodaer2. 从 CSS 进阶到 SCSS：sass-loader + node-sass3. CSS Module 实现命名空间隔离：css-loader3.1 Typescript 场景下使用 CSS ModuleBonus: 踩坑记录结语其他资源参考连接完整代码示例 前
CSS 模块化 实现方法
09-25
**CSS模块化实现方法** 模块化是现代前端开发中的一项重要技术，它旨在提升代码的复用性，降低维护成本，提高工作效率，并确保代码的可维护性和可扩展性。在CSS领域，模块化有助于解决样式混乱、代码冗余以及协同...
CSS模块化思想的优势
12-07
**CSS模块化思想的优势** CSS模块化是一种组织和管理CSS代码的方法，旨在提高代码的可维护性、可复用性和可扩展性。这种思想强调将复杂的样式表分解为独立、可重用的组件，以便在多个项目或页面中轻松地应用和组合...
webpack-template:Webpack CSS模块
05-09
在本项目"webpack-template"中，我们看到一个基于Webpack的配置，专门针对CSS模块化进行了优化。通过以下步骤，我们可以深入理解这个主题： 1. **安装依赖**：在描述中提到，首先需要通过`npm install`命令来安装...
详解webpack分离css单独打包
12-10
你可以根据项目需求灵活配置多个入口，以实现 CSS 文件的精细化管理。 ### 结论 Webpack 提供了强大的 CSS 分离功能，通过 `extract-text-webpack-plugin` 可以方便地将 CSS 从 JavaScript 中抽离，生成独立的 CSS ...
Webpack中css-loader和less-loader的使用教程
12-03
Webpack 是一个现代JavaScript应用程序的模块打包工具，它允许开发者将分散的模块文件组合成单一的可部署资源。在处理CSS和预处理器语言如Less时，Webpack 提供了专门的加载器（loader）来处理这些任务。本文将详细...
CSS Modules - CSS模块化
weixin_43924896的博客
06-06 2085
介绍CSS Module的原理和语法，以及实际的应用范围
webpack项目轻松混用css module
weixin_34092370的博客
06-07 192
前言 本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。 比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成css module。 一、产生问题的原因 { test: /\.css$/, use: [ 'style-loader', { loa...
如何使用 Webpack 实现模块化打包？
我乐了的博客
02-13 952
整体上对于 Webpack 的基本使用其实并不复杂，特别是在 Webpack 4 以后，很多配置都已经被简化了，在这种配置并不复杂的前提下，开发人员对它的掌握程度主要就体现在了是否能够理解它的工作机制和原理上了。就拿 Webpack 打包过后的结果来说，大多数的开发者其实根本不会关心它内部的结构是怎样的，又是如何运行起来的，总觉得不需要关心，但是当这种“不用关心”的事情越积越多，整个开发过程不可控的点也会随之增多，当出现问题时，也就很难定位问题的根源了。
webpack中的css配置
qq_55928824的博客
07-19 1133
webpack中的css配置
前端工程化之：webpack3-1(css工程化概述)
m0_60189088的博客
02-04 1146
当你写一个 css 类的时候，你是写全局的类呢，还是写多个层级选择后的类呢？你会发现，怎么都不好。一旦样式多起来，这个问题就会变得越发严重，其实归根结底，就是类名冲突不好解决的问题。
前端学习案例8-webpack中css模块化
qq_41632427的博客
12-10 153
前端

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值