webpack基础(三) 处理css

• 处理npm代理问题
  npm 安装依赖的时候，肯定感觉下载速度过慢，需要给npm设置源。目前使用的源为淘宝源。首先在项目根目录下面新建一个.npmrc文件，在文件中添加淘宝源
  .npmrc文件

npm config set registry https://registry.npm.taobao.com 
# 让项目所有的npm都走淘宝源，从而加快下载速度

样式处理

安装style-loader css-loader

npm install style-loader css-loader -D

在webpack中配置

 module:{
        rules:[
            {
                test:/\.css$/,
                use:["style-loader","css-loader"] //顺序不能变，因为要先把css处理好然后在用处理好的css加载到style上面

            },
}

处理less

安装less-loader

npm install less less-loader -D

• 为什么需要less less-loader 两个loader了?
  这是因为webpack与less文件链接的桥梁是less,less-loader才是处理less的真正loader，这也体现了一个loader只负责处理一件事
  webpack配置如下

   {
              test:/\.less$/,
            /**
             * 切记：这三者的顺序不能乱写
             * 这是因为每个loader只做一件事，需要先使用less-loader
             * 把less文件变成.css，然后才能使用css-loader处理
             * 在使用style-loader处理
             * */   
           use:["style-loader","css-loader","less-loader"], 
            }

postcss

• postcss是什么?
  1.把css解析成可以js可以操作的抽象语法树AST
  2.调用插件来处理AST并得到结果
• postcss 怎么处理css
  postcss 本身不处理css，它是靠自带的插件来完成css的处理比如常见的，自动补齐浏览器前缀：autoprefixer ，css压缩 cssnano
• postcss 如何使用

1. 安装
   可以把postcss-loader 和需要用到的插件一起使用安装

 npm install postcss-loader autoprefixer cssnano -D

2. postcss自己本身有配置文件。需要新建一个postcss.config.js文件，文件内容如下

module.exports = {
    plugins:[
        require("autoprefixer"),
        require("cssnano")
    ]
}

3.需要创建指定哪些浏览器使用。
这一步有三种方式使用
第一种:在package.json文件中创建 browserslist字段，value设置相关的值即可

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

第二种：新建一个.browserslist 文件在文件中添加支持的浏览器即可
.browserslist

> 1%
last 2 versions
not ie <= 8

第三种就是在postcss.config.js文件中 require("autoprefixer")对象中有browserslist 属性，把支持的浏览器输入进入就可以了

css分离

css分离使用的是 mini-css-extract-plugin

• 安装

npm install mini-css-extract-plugin -D

• 使用
  在webpack中引入mini-css-extract-plugin，然后在使用plugins中注册插件，在css文件中使用

 new MiniCssExtractPlugin({
            filename:"[name].css" //代表生成文件的名称
        })

            {
              test:/\.less$/,
            /**
             * 切记：这三者的顺序不能乱写
             * 这是因为每个loader只做一件事，需要先使用less-loader
             * 把less文件变成.css，然后才能使用css-loader处理
             * 在使用style-loader处理
             * */   
            // //   use:["style-loader","css-loader","less-loader"],
            // use:["style-loader","css-loader","postcss-loader","less-loader"],
            // 模块化
            use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","less-loader"],
            
            }