2.1.6 css compile processing -2

Compile less, sass preprocessing language - the browser does not recognize, needs to be compiled into css to be recognized

less

1、less　　　　　　
2、less-loader　　

sass

1、sass-loader
2、node-sass

For example to less 
rules: [
     {
       test:/\.less$/,
       use: [ // execution order is from the back of the loader of 
        {
          loader: 'style-loader',
          options:{
            singleton: true,
            transform: './transform.js'
          }
        },{
          loader: 'css-loader',
          options: {
            module: {
              localIdentName: '[path] [name] _ [local] _ [the hash:. 4]' // class name is compiled, starting alias file name local- path- path name- original class name 
            }
          }
        },{
          loader: 'less-loader'
        }
       ]
     }
]

Extraction css code - the css packaged into a single file  extract-text-webpack-plugin

Plug corresponding -> transformed into the wording of the loader -> Add the plugin

-->  extract-text-webpack-plugin 

-> introduction extract-text-webpack-plugin, the user changed using the extract-text-webpack-plugin  

-> the extract-text-webpack-plugin added plugin in 

--> 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: [ // before performing style-loader to be used Loader 
            {
              loader: 'css-loader',
              options: {
                // module: true
                module: {
                  localIdentName: '[path] [name] _ [local] _ [the hash:. 4]' // class name is compiled, starting alias file name local- path- path name- original class name 
                }
              }
            },{
              loader: 'less-loader'
            }
          ]
       })
     }
        ]
  },
  plugins: [
    new extractTextCss({
      filename: '[name].min.css'
    })
  ]
}

 

Designated public browsersList 

1, the new file in the project .browserslistrc not clear ,,,

2, as specified in the package.json --- more recommended

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

 

postcss plug-in automatic replenishment under a prefix and use css styles

installation:

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

The final version

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:[
                // the require ( 'autoprefixer') ({ 
                //    'overrideBrowsersList': [ 
                //      ">%. 1", "2 Last versions" 
                //    ] 
                // }), 
               the require ( 'autoprefixer') (), // Configure the public, do not need to set 
               the require ( 'postcss-cssnext') ()   // use the next CSS 
              ]
             }
           },
           {
            loader:'less-loader'
           }        
          ]         
       })
     }
        ]
    },
  plugins:[
   new extractTextCss({
    filename:'[name].min.css'
   })
  ]
}