CSS与webpack

最新推荐文章于 2024-02-17 17:30:59 发布

.01

最新推荐文章于 2024-02-17 17:30:59 发布

阅读量132

点赞数

分类专栏： CSS&HTML

本文链接：https://blog.csdn.net/qq_43340342/article/details/104402888

版权

CSS&HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

webpack

在这里插入图片描述

webpack作用

JS是整个应用的核心入口
一起资源均由JS管理依赖
一切资源均有webpack打包发布

安装

npm install webpack webpack-cli --save-dev

运行语法

npx  webpack  a.js  -o  pack.js  --mode  development

各个文件

src/05-webpack-main.js

var module = require('./05-webpack-module.js');

module.say();

src/05-webpack-module.js

module.exports = {
	say: function(){
		console.log('hello from module');
	}
}

build/05-webpack-main.js

建一个空文件。build/05-webpack-main.js

webpack-main.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src = "build/05-webpack-main.js"></script>
</head>
<body>
	
</body>
</html>

运行

npx webpack src/05-webpack-main.js -o build/05-webpack-main.js --mode development

打开html，控制台能看到“hello from module”

CSS的使用

npm i css-loader style-loader

配置文件

webpack.config.js

module.exports = {
    module:{
        rules:[{
                test:/\.css$/,
                use:['style-loader','css-loader']
        }]
    }                  
}

建一个空文件。build/06-webpack-main.js

webpack-main.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src = "build/06-webpack-main.js"></script>
</head>
<body>
	hello
</body>
</html>

06-webpack-css.css

body{
	color: red;
}

06-webpack-main.js

require('./06-webpack-css.css');

console.log('hello');

运行

npx webpack src/06-webpack-main.js -o build/06-webpack-main.js --mode development

打开html，控制台打出hello，并且html显示的hello是红色

css modules

各个文件

src/07-webpack-component.css

.p{
	font-size: 16px;
	color: #999;
}

.red{
	color: red;
}

.green{
	color: green;
}

src/07-webpack-component.js

var styles = require('./07-webpack-component.css');

exports.init = function ($dom) {
	$dom.innerHTML = '<p class="'+ styles.p + '">我是一个自给自足的组件</p>' 
	+'<p class="'+ styles.p + ' '+styles.red + '">我有时候是红的</p>'  
	+'<p class="'+ styles.p + ' '+ styles.green + '">有时候是绿的</p>';
}

注意空格'<p class="'+ styles.p + ' '+styles.red + '">我有时候是红的</p>'

src/07-webpack-main.js

const component = require('./07-webpack-component');

document.addEventListener('DOMContentLoaded', function(){
	component.init(document.querySelector('#component'));
});

配置

module.exports = {
    module:{
        rules:[{
                test:/\.css$/,
                use:['style-loader',{
                	loader: 'css-loader',
                	options:{
                		modules: true
                	}
                }]
        }]
    }                  
}

extract-text-webpack-plugin

安装

npm install --save-dev extract-text-webpack-plugin@next

配置

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    module:{
        rules:[{
                test:/\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                })
        }]
    },
    plugins:[
        new ExtractTextPlugin('07-webpack-main.css')
    ]                  
}

运行后的css文件 07-webpack-main.css

._3hcHhNzNHnhDdcBTkxqfnp{
	font-size: 16px;
	color: #999;
}

.G2o67eUP0HgqAsRkU2Z9u{
	color: red;
}

._3kfzCygPX_XLixKQ3_yPqa{
	color: green;
}

在css modules时跟header一起加载的css就提取了出来

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="build/07-webpack-main.css"/>
	<script src = "build/07-webpack-main.js"></script>
</head>
<body>
	<div id = "component" class="component"></div>
</body>
</html>

浏览器运行html，第一行字灰色，第二行红色，第三行绿色

小结

css-loader将CSS变成JS
style-loader将JS样式插入head
ExtractTextPlugin将CSS从JS中提取出来
css modules 解决CSS命名冲突的问题
less-loader sass-loader各类预处理器
postcss-loader PostCSS处理