Webpack4 学习笔记 - 03:loader 打包静态资源(样式)

栏目: CSS · 发布时间: 5年前

内容简介:首先在src目录下创建一个 index.css 文件,内容如下:修改 index.js 文件内容如下:代码的内容是创建一个div,并把this_style的样式赋给它,使它的字体变为红色。然后直接运行

使用 style-loadercss-loader 打包 css 文件

首先在src目录下创建一个 index.css 文件,内容如下:

.this_style {
    color: red;
}

修改 index.js 文件内容如下:

import './index.css';

var root = document.getElementById('root');
var wp = document.createElement('div');
wp.innerText = 'Hello, Webpack';
wp.classList.add('this_style');

root.append(wp);

代码的内容是创建一个div,并把this_style的样式赋给它,使它的字体变为红色。然后直接运行 npm run bundle 来打包会报错吗?当然会了,因为之前说过 webpack 只能处理 js 文件,遇到 css 文件时,它就不知道该怎么办了。所以我们就配置一下 webpack.config.js 来告诉它怎么做,配置内容如下:

const path = require('path'); // 得到的path为webpack.config.js所在的目录

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
    mode: 'development'
}

然后安装 style-loadercss-loader

npm install style-loader css-loader -D

安装完之后,执行打包命令,没有报错,就说明 webpack 已经正确打包好了 css 文件。打开 index.html 可以看到,字体的颜色已经变成了红色:

Webpack4 学习笔记 - 03:loader 打包静态资源(样式)

Webpack4 学习笔记 - 03:loader 打包静态资源(样式)

下面大概来说一下 style-loadercss-loader 做了哪些工作,详细的说明可以去看官方文档。

在src目录下再新建一个 test.css 文件,给 this_style 样式加一个背景色:

.this_style {
    background-color: #999999; /* 灰色 */
}

然后在 index.css 文件中引入 test.css:

@import './test.css';

.this_style {
    color: red;
}

执行打包命令,打开 index.html 查看结果:

Webpack4 学习笔记 - 03:loader 打包静态资源(样式)

Webpack4 学习笔记 - 03:loader 打包静态资源(样式)

打包成功, 背景色显示了出来。

在这段打包的过程中, css-loader 会根据 css 的语法,比如 @import.. 分析出几个 css 文件的关系,然后把它们合并成一段 cssstyle-loader 在得到 css-loader 生成的内容之后,会把这段内容添加到指定的内页元素上,最后呈现出上图的结果。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

微积分的历程

微积分的历程

William Dunham / 李伯民、汪军、张怀勇 / 人民邮电出版社 / 2010-8 / 29.00元

“微积分”这一名称最早出现在哪本书中?第一本微积分教科书又是谁人所写?微积分究竟是谁人发明的?著名的洛必达法则居然是伯努利的研究成果?谁被誉为“分析学的化身”?谁又被誉为“现代分析学之父”?哪些数学天才使微积分的创建过程终于画上完美的句号?……本书将带你一一探究上述问题。 本书宛如一座陈列室,汇聚了十多位数学大师的杰作,当你徜徉其中时会对人类的想象力惊叹不已,当你离去时必然满怀对天才们的钦佩......一起来看看 《微积分的历程》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具