webpack-css篇

1.下载css-loader

npm i -D  css-loader style-loader

打包css文件需要用到style-loader和css-loader。
2.在webpack打包文件中配置:

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

css-loader 可以打包css代码，style-loader将打包好的代码挂载到页面上。
注意: 需要在要被打包的文件中引入css，否则css文件将不会打包。如果要在css文件里引入其他css文件应使用@important "./xxx";的语法。

3.运行打包命令进行打包。打包时webpack会先用css-loader将css处理一遍，将处理后的结果传入style-loader。webpack处理loader的顺序与配置文件里写的loader的顺序有关，即后面的loader先被使用，将结果传到前面的loader，最终转化为打包结果。此时css会与js代码混合打包在dist目录下的同一个文件里。

打包css预编译处理语言

sass：
1.下载sass-loader：

npm install sass-loader node-sass --save-dev

2.在webpack配置文件中做如下配置：

  {
  	test:/\.scss$/,
  	use:['style-loader','css-loader','sass-loader']
  }

3.运行打包命令。

给css类名添加前缀（兼容性）

1.下载相应的loader，要用到autoprefixer：

npm install -D postcss-loader autoprefixer

2. 在配置文件css-loader中添加代码：

 {
  test:/\.scss$/,
  use:['style-loader','css-loader','sass-loader','postcss-loader']
 }

3.需要新建一个配置文件postcss.config.js

module.exports = {  
	plugins: [    require('autoprefixer')  ]
}

此时所引入的样式为全局样式，在所有的js文件里都能使用。

css模块化打包（让css只在本文件中生效）

点击查看文档档
修改wenbpack配置文件：

  {
   test:/\.scss$/,
   use:['style-loader', {
   loader:'css-loader',options:{ 
   modules:true,
   localIdentName:"[path][name]__[local]--[hash:base64:5],"//配置打包后的类名
   
   }
   },'sass-loader','postcss-loader']
  }

然后在js文件中这样引入css：

import Css from './Css.css'

console.log(Css)

此时打印出来的css为一个对象，对象的属性名是css文件里设置的类名。

3.执行打包命令。

此时打包的css文件只能在引入的文件中使用，其他地方则不能使用。

打包字体图标文件

当要引入字体文件时，比如引用阿里巴巴矢量图标库的字体文件。需要先将字体的代码下载下来，然后将字体的css文件粘到自己的项目中。
字体文件的打包配置时，需要的是全局样式。

然后用file-loader进行打包。
webpack配置文件如下：

此时，如果不写options，代码将会直接打包到dist目录下。

通过配置options的outputPath属性，可以将字体文件全部打包到名为font的文件夹下。
通过配置name属性可以配置打包后的文件名称。[name]代表原来的字体文件名称，[ext]表示原来的后缀名。

打包后将css代码与js代码分离

1.安装:npm i -D mini-css-extract-plugin
2.配置：点击查看文档
将原来配置里的style-loade替换成MiniCssExtractPlugin.loader,配置sass、less库的打包规则时也是如此。

css代码压缩(生产环境)

1.安装:npm install --save-dev optimize-css-assets-webpack-plugin
2.配置：点击查看文档