webpack使用五
2021-05-16 07:29
标签：target 语言 imp styles for 特性 conf text 图片 Webpack有一个不可不说的优点，它把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可以被处理。 webpack提供两个工具处理样式表， 继续上面的例子 请注意这里对同一个文件引入多个loader的方法。 接下来，在app文件夹里创建一个名字为"main.css"的文件，对一些元素设置样式 我们这里例子中用到的 通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。 上面的代码说明webpack是怎么把css当做模块看待的，咱们继续看一个更加真实的css模块实践。 在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，配合优化工具，依赖管理和加载管理可以自动完成。 不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都非常困难。 最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递到所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中使用相同的类名造成冲突。具体的代码如下 在app文件夹下创建一个 导入 放心使用把，相同的类名也不会造成不同组件之间的污染 CSS modules 也是一个很大的主题，有兴趣的话可以去官方文档查看更多消息 你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理 不过其实也存在一个CSS的处理平台 举例来说如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。 首先安装 接下来，在webpack配置文件中添加 至此，本文已经谈论了处理JS的Babel和处理CSS的PostCSS的基本用法，它们其实也是两个单独的平台，配合 webpack使用五 标签：target 语言 imp styles for 特性 conf text 图片 原文地址：http://www.cnblogs.com/ldlx-mars/p/7748632.html一切皆模块
CSS
css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。//安装
npm install --save-dev style-loader css-loader
//使用
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
}
};
/* main.css */
html {
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
webpack只有单一的入口，其它的模块需要通过 import, require, url等与入口文件建立其关联，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中，如下//main.js
import React from ‘react‘;
import {render} from ‘react-dom‘;
import Greeter from ‘./Greeter‘;
import ‘./main.css‘;//使用require导入css文件
render(Greeter />, document.getElementById(‘root‘));
CSS module
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}
]
}
]
}
};
Greeter.css文件.root {
background-color: #eee;
padding: 10px;
border: 3px solid #ccc;
}
.root到Greeter.js中import React, {Component} from ‘react‘;
import config from ‘./config.json‘;
import styles from ‘./Greeter.css‘;//导入
class Greeter extends Component{
render() {
return (
div className={styles.root}>//添加类名
{config.greetText}
div>
);
}
}
export default Greeter
CSS预处理器
Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，loaders:
Less LoaderSass LoaderStylus Loader-PostCSS，它可以帮助你的CSS实现更多的功能，在其官方文档可了解更多相关知识。postcss-loader 和 autoprefixer（自动添加前缀的插件）npm install --save-dev postcss-loader autoprefixer
postcss-loader，在根目录新建postcss.config.js,并添加如下代码之后，重新使用npm start打包时，你写的css会自动根据Can i use里的数据添加不同前缀了。//webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
}
}
// postcss.config.js
module.exports = {
plugins: [
require(‘autoprefixer‘)
]
}
webpack可以很好的发挥它们的作用。接下来介绍Webpack中另一个非常重要的功能-Plugins
上一篇：webpack使用七
下一篇：webpack使用三