webpack的css处理

webpack的css处理
webpack打包处理css的时候需要两个loader:
style-loader 和css-loader
安装：
1npm install style-loader css-loader --save-dev
style-loader：负责将打包⽣成的代码嵌⼊到html页⾯中.
css-loader:是允许将css⽂件引⼊到.js⽂件中；
简单的打包css的webpack.config.js⽂件：
1var path = require('path')
2module.exports = {
3 entry:{
4 app:'./src/app.js'
5 },
6 output: {
7 path:path.resolve(__dirname,'dist'),
8 publicPath: "./dist/",
9 filename: "[name].bundle.js"
10 },
11 module:{
12 rules:[
13 {
14 test:/\.css$/,
15 use:[
16 {
17 loader:'style-loader',//在html页⾯中插⼊<style>标签；
18 // options:{
19 // insertInto:'#app',//将打包成的style标签插⼊app
20 // singlleton:true,//只⽣成⼀个style标签
21 // transfrom:'./css.transform.js'//css的变形，它会在打包⽣成的标签插⼊html页⾯的时候⽣效，因此还可以获取浏览器的相关信息
22 // }
23 // loader:'style-loader/url'//会在头部插⼊<link>标签//如果打包多个⽂件会⽣成多个link，影响性能，推荐使⽤上⼀种；
24 //loader:"style-loader/useable"//控制样式插⼊或者不插⼊页⾯中；
25
26 },
27 {
28 loader:'css-loader',
29 // loader:'file-loader',
30 options:{
31 minimize:true,
32 modules:true//开启了modules，在js中引⼊css⽂件以后，就可以导出css⽂件，点.出css⽂件中的内容；
33 }
34 }
35 ]
36 }
37 ]
38 }
39}
style-loader:有⼀个options配置，包括：
1.inserAt:形成的标签插⼊的位置；
2.insertInto:插⼊到dom
3.singleton:true/false是否只使⽤⼀个style标签
4.transform:转化，是在浏览器环境下⽣效，插⼊页⾯之前；可以进⾏和浏览器相关的页⾯样式操作
如：css.transform.js⽂件：
1module.exports = function (css) {
2 console.log(css)
3 console.log(window.innerWidth)
4 if(window.innerWidth >= 768){
5 return css.replace('red','green')
6 }else{
7 return css.replace('red','orange')
8 }
9}
style-loader的两个同类：
1.style-loader/url：是将打包的代码以Link的形式插⼊到页⾯中；
2.style-loader/useable：是否允许插⼊引⼊的⽂件，在.js中使⽤
css的options配置项：
1.alias(解析的别名）
2.importLoader(@import)
3.Minimize(是否压缩）
4.modules(启⽤css-modules)
css-Modules的参数：
1.：local
2.global
pose
pose...from path
compose使⽤代码：
1.box {
2 composes: bigBox from './common.css';//为了优先级，默认将引⼊的写⼊到括号中的第⼀⾏
3 width: 200px;
4 height: 200px;
5 background: skyblue;
6 border-radius:5%;
7 }
less与sass配置：
安装：
1npm install less-loader less --save-dev
2npm install sass-loader node-sass --save-dev
配置代码：
1 rules:[
2 {
3 test:/\.less$/,
4 use:[
5 {
6 loader:'style-loader',//在html页⾯中插⼊<style>标签；
7 // options:{
8 // insertInto:'#app',//将打包成的style标签插⼊app
9 // singlleton:true,//只⽣成⼀个style标签
10 // transfrom:'./css.transform.js'//css的变形，它会在打包⽣成的标签插⼊html页⾯的时候⽣效，因此还可以获取浏览器的相关信息
11 // }
12 // loader:'style-loader/url'//会在头部插⼊<link>标签//如果打包多个⽂件会⽣成多个link，影响性能，推荐使⽤上⼀种；
13 //loader:"style-loader/useable"//控制样式插⼊或者不插⼊页⾯中；
14
15 },
16 {
17 loader:'css-loader',
18 // loader:'file-loader',
19 options:{
20 minimize:true,
21 modules:true//开启了modules，在js中引⼊css⽂件以后，就可以导出css⽂件，点.出css⽂件中的内容；
22 }
23 },
24 {
25 loader:'less-loader'
26 }
27 ]
28 }
29 ]
⼆.提取css ----- 使⽤插件
安装：
npm install --save-dev extract-text-webpack-plugin
使⽤：
1const ExtractTextPlugin = require("extract-text-webpack-plugin"); 2
3module.exports = {
4 module: {
5 rules: [
6 {
7 test: /\.css$/,
8 use: ExtractTextPlugin.extract({
9 fallback: "style-loader",
10 use: "css-loader"
11 })
12 }
13 ]
14 },
15 plugins: [
16 new ExtractTextPlugin("styles.css"),
17 ]
18}。