2.1.6 css的编译与处理 -2

less ，sass等预处理语言的编译  --浏览器无法识别，需要编译成css才能被识别

less

1、less　　　　　　
2、less-loader　　

sass

1、sass-loader
2、node-sass

以less为例
rules: [
     {
       test:/.less$/,
       use:[ //loader的执行顺序是从后往前的
        {
          loader: 'style-loader',
          options:{
            singleton: true,
            transform: './transform.js'
          }
        },{
          loader: 'css-loader',
          options: {
            module: {
              localIdentName: '[path][name]_[local]_[hash:4]' //类名会被编译，起个别名 path-路径 name-文件名 local-本来的类名
            }
          }
        },{
          loader: 'less-loader'
        }
       ]
     }
]

提取css代码  --把css打包成一个单独的文件 extract-text-webpack-plugin

安装对应的插件  -->  改造成loader处的写法  -->  在plugin处添加

-->  extract-text-webpack-plugin 

--> 引入extract-text-webpack-plugin， 把 user 改成使用extract-text-webpack-plugin  

-->   把 extract-text-webpack-plugin加 入 plugin 里 

--> index.html 中使用 link 引入 <link rel="stylesheet" type="text/css" href="./src/dist/app.min.css">

var extractTextCss=require('extract-text-webpack-plugin');
module.exports= {
    module:{
        rules: [
     {
       test:/.less$/,
       use: extractTextCss.extract({
         fallback: { //值为style-loader
            loader: 'style-loader',
            options:{
              // insertInfo: '#mydiv',
              singleton: true,
              transform: './transform.js'
            }
          },
          use: [ //执行style-loader之前要使用的loader
            {
              loader: 'css-loader',
              options: {
                // module: true
                module: {
                  localIdentName: '[path][name]_[local]_[hash:4]' //类名会被编译，起个别名 path-路径 name-文件名 local-本来的类名
                }
              }
            },{
              loader: 'less-loader'
            }
          ]
       })
     }
        ]
  },
  plugins: [
    new extractTextCss({
      filename: '[name].min.css'
    })
  ]
}

指定公用的 browsersList 

1、在项目中新建 .browserslistrc 文件，，，不太清楚

2、在package.json中指定  --- 更推荐

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

postcss 的插件 自动补充前缀和使用下一个css样式

安装：

cnpm install postcss postcss-loader autoprefixer postcss-cssnext --save

终结版

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')({
                //   'overrideBrowsersList': [
                //     ">1%","last 2 versions"
                //   ]
                // }),
               require('autoprefixer')(), //配置公共的了，就不需要再设置
               require('postcss-cssnext')()  //使用下一个css
              ]
             }
           },
           {
            loader:'less-loader'
           }        
          ]         
       })
     }
        ]
    },
  plugins:[
   new extractTextCss({
    filename:'[name].min.css'
   })
  ]
}