webpack之css的编译

webpack是以js文件作为入口打包的。

项目中的css如何引入？

css可以通过js文件引入，但必须使用相应的loader

1.css-loader，让css可以被js正确的引入

2.style-loader，让css被引入后可以被正确的以一个style标签插入页面

3. 两种顺序不能颠倒，先经过css-loader处理，再由style-loader处理。

var extractTextCss=require('extract-text-webpack-plugin');
module.exports= {
	entry:{
	 app:"./app.js",
	},
	output:{
		path:__dirname+"/src/dist",
		filename:"./[name].bundle.js"
	},
 	resolve:{
     alias: {
       a2:"./js/app2.js",
     }
 	},
	module:{
		rules: [
      {
        test:/\.css$/,
        use:[
          {
            loader:'style-loader',
            options:{
              insertAt:'bottom'
            }
          },
          {
            loader:'css-loader'
          }
        ]
        
      }

		]
	},

}

 以上配置webpack，然后将打包好的app.bundle.js文件引入到html文件中，

 

css样式被打包在app.bundle.js中。打开浏览器，会发现html存在style标签。

 

style-loader

insertAt

style标签的位置由insertAt决定，是在head的头部还是尾部。

insertAt{before:'#mydiv'}这个测试过，没有用。。会默认放在head底部；

 

insertInto

insertInto:'#mydiv'

将这个style标签放入某个dom中，如果是''.div1''匹配到多个，则放入第一个匹配到的标签中；

 

singleton

singleton:true，style标签变为一个。

 

transform

transform:'./transform.js'

 

transform.js

 module.exports=function(css){

  if(window.screen.width<500){

    css=css.replace('red','yellow');

  }

  return css;

}

style标签生效之前，对css进行的修改。

css-loader

css-loader没有什么特别好玩的配置

开启modules:true


:global #mydiv1{//不改变标签class名和id等名称
    border: 4px solid white;
}
:local .div1{
    width:100px;
    height:100px;
    background:yellow;
}

//改变名称。。引入到index.html中需要在js文件中

import test from   "./test.css";
document.getElementById('mydiv').setAttribute('class',test.div1)

另外亲测。。。composes没有用。


modules: {
          localIdentName: "[name]__[local]___[hash:base64:5]"//test2__div1___1nk9T
          }
这个可以让类名（id名等）有一定规律；

css打包成单独一个文件，并加上后缀

var extractTextCss=require('extract-text-webpack-plugin');
module.exports= {
	entry:{
	 app:"./app.js",
	},
	output:{
		path:__dirname+"/src/dist",
		filename:"./[name].bundle.js"
	},
 	resolve:{
     alias: {
       a2:"./js/app2.js",
     }
 	},
	module:{
		rules: [
     {
       test:/\.less$/,
       use:extractTextCss.extract({
        fallback:{
           loader:'style-loader',
           options:{
            //insertInto:"#mydiv",
            singleton:true,
            //transform:"./transform.js"
           }
         },
          use:[       
           {
             loader:'css-loader',
             options:{
               modules:{
                localIdentName:'[path][name]_[local]_[hash:4]'
               }                    
             } 
           },
           {
             loader:'postcss-loader',
             options:{
              ident:'postcss',
              plugins:[
               require('autoprefixer')(),
               require('postcss-cssnext')()
              ]
             }
           },
           {
            loader:'less-loader'
           }        
          ]         
       })
     }
		]
	},
  plugins:[
   new extractTextCss({
    filename:'./css/[name].min.css'//相对于output的路径
   })
  ]
}

为了让大多数浏览器都符合：

在package.json中加入：

  "browserslist": [
    ">1%",
    "last 2 versions"
  ]