使用webpack来"编译"你的css和图片初步

最新推荐文章于 2024-05-14 12:59:47 发布

学习笔记666

最新推荐文章于 2024-05-14 12:59:47 发布

阅读量1.3w

点赞数 1

分类专栏： HTML5 文章标签： css 图片

本文链接：https://blog.csdn.net/github_26672553/article/details/52107165

版权

HTML5 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

安装css-loader

$ npm install css-loader style-loader

前者(css-loader)是为了遍历你的css，后者(style-loader)是为了进行style标记生成
这里写图片描述
利用它就可以把css给打包了，我们加入配置文件

{
    test:/\.css$/,
    loaders:['style','css']
}

然后执行: webpack命令
html如下：

<!DOCTYPE html>
<html>
<head>
    <title>es2105的写法</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="es2015/index-webpack.js"></script>
</head>
<body>
<div>欢迎光临</div>
</body>
</html>

预览效果：
这里写图片描述

如果css中包含图片呢？
$ npm install url-loader
这里写图片描述
配置文件加入
{
test:/.(png)|(jpg)$/,
loader: “url?limit=50000”
}
limit参数，代表如果小于大约50k则会自动帮你压缩base64编码的图片

查看css文件：

div{color: red;background: url("./1.jpg");}

查看最后的配置文件webpack.config.js

module.exports = {
    // configuration
    entry: "./es2015/index.js", //代表入口(总)文件，可以写多个
    output: {
        path: "./es2015/", //输出文件夹
        filename: "index-webpack.js" //最终打包生成的文件名
    },
    module: {
        loaders: [
            {
                test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
                loader: "babel",
                query: {presets: ['es2015']}
            },

            {
                test:/\.css$/,
                loaders:['style','css']
            },

            {
                test:/\.(png)|(jpg)$/,
                loader: "url?limit=50000"
            }
        ]
    }
}

同样执行webpack命令后，我们来查看图片是否加载
这里写图片描述
我们可以看到css里的背景图片也成功加载，并且转换成了base64。

学习笔记666

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
使用webpack来"编译"你的css和图片初步

安装css-loader$ npm install css-loader style-loader前者(css-loader)是为了遍历你的css，后者(style-loader)是为了进行style标记生成利用它就可以把css给打包了，我们加入配置文件{ test:/\.css$/, loaders:['style','css']}然后执行: webpack命令 htm
复制链接

扫一扫