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");

module: {
   rules: [
        {
            test: /\.css$/,
            use : ExtractTextWebpackPlugin.extract({
                use: [
                    { loader: "css-loader" }
                ]
            })
        },
        {
            test: /\.less$/,
            use : ExtractTextWebpackPlugin.extract({
                use: [
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            })
        }
    ]
},

plugins: [
   new ExtractTextWebpackPlugin({
        filename: "css/common.css"
    }),
 ]

（2）效果图即页面代码显示
可以看到css文件 common.css 以 link 标签的形式引入到页面中了

（3）如果要看的清晰一点可以打包代码查看

npm run build

2.分开抽离，分别把 css 和 less 放在两个 css 文件中 link 到页面
（1）webpack.config.js 配置

let ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
let CssExtract = new ExtractTextWebpackPlugin("css/css.css");
let LessExtract = new ExtractTextWebpackPlugin("css/less.css");

module: {
    rules: [
        {
            test: /\.css$/,
            use : CssExtract.extract({
                use: [
                    { loader: "css-loader" }
                ]
            })
        },
        {
            test: /\.less$/,
            use : LessExtract.extract({
                use: [
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            })
        }
    ]
},

plugins: [
	CssExtract,
	LessExtract,
	new ExtractTextWebpackPlugin({
		filename: "css/common.css"
	}),
]     

（2）执行运行命令得到的效果图

npm run dev

可以看到页面中分别 link 了两个css文件
（3）打包查看

npm run build

更多有关 extract-text-webpack-plugin 插件的详情，请戳

CSS样式抽离就到此结束啦~

下一篇我们介绍 webpack 4+ 的样式抽离插件 mini-css-extract-plugin ~~~