使用extract-text-webpack-plugin提取css文件

一、css之上的语言

js之上的语言有jsx、tyepscript、coffescript。 html之上的语言有jade。 css之上的语言有sass、scss、less、stylus，这几种语言区别其实不大，完全不需要纠结到底用那个。

css的缺点：

• 语法不够强大，不能够嵌套书写，不利于模块化开发
• 没有变量和逻辑上的复用机制，导致在css的属性值中只能使用字面量形式，以及不断重复书写重复的样式，导致难以维护。

css预编译语言的特点：

• 可以使用变量：就像其他编程语言一样，免于多处修改。
  
  Sass：使用$对变量进行声明，变量名和变量值使用冒号进行分割
  
  Less：使用@对变量进行声明
  
  Stylus：中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。

• 作用域：有了变量，就必须得有作用域进行管理。就想js一样，它会从局部作用域开始往上查找变量。 Sass：它的方式是三者中最差的，不存在全局变量的概念
  
  Less：它的方式和js比较相似，逐级往上查找变量
  
  Stylus：它的方式和Less比较相似，但是它和Sass一样更倾向于指令式查找

• 嵌套：对于css来说，有嵌套的写法无疑是完美的，更像是父子层级之间明确关系

postcss并不是一种预处理语言，而是一套插件系统，很多人认为postcss是css的未来。

二、使用lessc命令进行编译

原始的css已经足够优美了，想想开发桌面应用时我们是如何定义控件样式的，通过指令形式指定控件样式更加繁琐。 css之上的语言差别不大，我选less。npm install -g less less-loader 安装完成之后，使用lessc命令就可以编译less文件了。

三、使用extract-text-webpack-plugin插件自动提取css文件

为什么要把css文件单独出去

如果不单独出去，页面加载js会比较慢，用户会看到css加载之前的内容，页面比较丑陋。页面先加载css，再渲染html，最后才执行js。把css作为单独的link标签能够使页面加载时更加美观。

配置

webpack.config.js

var p = require('path')
var process = require('process')
var NODE_PATH=process.env['NODE_PATH']
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
   mode: 'development',
   entry: { "main.js": "./index.js" },
   output: { filename: '[name]' },
   module: {
      rules:[
        { test:/\.less$/, use:ExtractTextPlugin.extract({ use:['css-loader','less-loader'] }) }
     ]
   },
   resolve:{ modules:[NODE_PATH] },
   resolveLoader: { modules: [NODE_PATH] },
   plugins: [ new ExtractTextPlugin("custom.css"), ]
}

上面的配置中，通过resolve.modules设置寻找模块的路径，使用resolveLoader设置寻找loader的路径，这种方式在使用webpack-dev-server时可能会有问题，最佳方式是建立一个node_modules软连接，把NODE_PATH链接到当前文件夹。

可能遇到的问题

plain Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

extract-text-webpack-plugin这个插件目前不支持webpack 4.0，而npm仓库中默认安装的是适用于webpack3.0的插件，解决方案是直接使用下一代extract-text-webpack-plugin插件：

npm install -g extract-text-webpack-plugin@next

参考资料

webpack官网extract-text-webpack插件介绍

https://www.webpackjs.com/plugins/extract-text-webpack-plugin/

关于postcss https://segmentfault.com/a/1190000011595620

npm extract-text-webpack插件

https://www.npmjs.com/package/extract-text-webpack-plugin