webpack(7)_CSS_使用style-loader和css-loader

最新推荐文章于 2024-09-11 09:20:30 发布

ruiurrui

最新推荐文章于 2024-09-11 09:20:30 发布

阅读量8k

点赞数 8

分类专栏： webpack 文章标签：学习笔记

本文链接：https://blog.csdn.net/u010982507/article/details/81277151

版权

本文详细介绍了如何使用webpack、style-loader和css-loader处理CSS，包括不同方式引入CSS，style-loader和css-loader的功能、安装、配置及使用示例，还涉及style-loader的url、useable特性，以及options配置选项和css-loader的minimize、modules等选项。

摘要由CSDN通过智能技术生成

webpack除了编译打包js外，还可以编译处理CSS，本篇文章主要讲述如何使用style-loader和css-loader对css打包，主要从以下几点进行讲述：

css的引入
使用style-loader和css-loader打包css
使用style-loader/url
使用style-loader/useable
使用style-loader的options配置
使用css-loader的options配置

css的引入

1、css的引入分为三种情况：

通过<style></style>标签，在标签内可以写css样式
通过<link></link>标签引入css文件
在html标签元素中以style属性来定义样式

2、在js中导入css样式有：

import “base.css”
import Base from “base.css”

使用style-loader和css-loader打包css

1、 style-loader

作用
style-loader能够在需要载入的html中创建一个<style></style>标签，标签里的内容就是CSS内容。
安装style-loader
npm install style-loader --save-dev

2、css-loader

作用
css-loader是允许在js中import一个css文件，会将css文件当成一个模块引入到js文件中。
安装css-loader
npm install css-loader --save-dev

3、实例

进入空目录Test，并初始化，生成package.json文件
npm init
创建目录和文件src/css/base.css，并添加如下代码

html{
    background: red;
}

创建src/app.js，并将base.css文件当成模块进行引入

import './css/base.css';

创建webpack.config.js，并编写打包脚本

// 引入node的path模块
var path = require('path');
module.exports = {
    entry: {
        app: "./src/app.js"  // 要打包的入口文件
    },
    output: {
        path: path.resolve(__dirname, "dist"), // 使用绝对路径，dist目录
        filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js
    },
    module: {
        rules: [ // 定义css规则
            {
                test: /\.css$/, // 正则匹配要识别的css
                use: [
                    {
                        loader: 'style-loader' // 使用style-loader进行处理，位置必须在css-loader前面
                    },
                    {
                        loader: 'css-loader' // 使用css-loader进行处理
                    }
                ]
               //use:['style-loader','css-loader'] // 此处也可以这样写
            }
        ]
    }
}

注：上面是webpack2的写法，下面是webpack1的写法，webpack1建议抛弃。

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

执行打包命令
webpack
打包结果
在dist目录下生成app.bundle.js，打开这个文件，会发现已经将css打包成js代码

// module
exports.push([module.i, "html{\r\n    background: red;\r\n}", ""]);

4、测试打包文件

创建index.html ，并引入打包好的app.bundle.js

<!DOCTYPE html>
<

最低0.47元/天解锁文章

ruiurrui

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录