webpack4+学习笔记：7. CSS样式抽离之 extract-text-webpack-plugin 插件

CSS样式抽离之 extract-text-webpack-plugin 插件

分析：
使用 extract-text-webpack-plugin 插件可以实现样式以css文件的形式 link 到 html 页面中。这里有两种形式，一是 css 和 less 抽离到同一个 css 文件里，二是分开抽离，分别把 css 和 less 放在两个 css 文件中 link 到页面。这里区别于前一节的样式导入，这里在样式表中修改样式后热更新失效，要手动刷新。

安装插件

这里需要注意！！！

extract-text-webpack-plugin 插件是 webpack3的，所以在安装的时候要加后缀 @next

//终端中输入
npm install extract-text-webpack-plugin@next -D

查看 package.json 文件

1. css 和 less 抽离到同一个 css 文件 common.css 里
（1）webpack.config.js 配置

let ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");