3-2 webpack4插件-提取分离css单独打包

webpack提取分离css单独打包

就是将所有的入口 chunk(entry chunks)中引用的 css，移动到独立分离的CSS文件，如下图所示：

需要使用extract-text-webpack-plugin(旧版)插件或者mini-css-extract-plugin(新版)插件。

一.extract-text-webpack-plugin插件

具体步骤：

1.安装依赖
打开终端，进入到项目文件夹路径，输入命令cnpm install --save-dev extract-text-webpack-plugin@next
2.配置webpack.config.js文件
首先需要引入html-webpack-plugin插件,代码如下：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

3.在module.exports = {}里的module里的rules里写配置：

{
	test:/\.css$/,
	use:ExtractTextPlugin.extract({
	//fallback:编译后用什么loader来提取css文件
		fallback:"style-loader",
		use:"css-loader"
	})
},

在module.exports = {}里的plugins里写配置：

//可以打包在一个文件夹内
new ExtractTextPlugin("./css/index.css"),

4.在终端输入npm run dev进行打包。

二.mini-css-extract-plugin插件

1.安装依赖
打开终端，进入到项目文件夹路径，输入命令cnpm install --save-dev mini-css-extract-plugin
2.配置webpack.config.js文件
首先需要引入html-webpack-plugin插件,代码如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

3.在module.exports = {}里的module里的rules里写配置：

{
	test:/\.css$/,
	use:[MiniCssExtractPlugin.loader,'css-loader']
},

在module.exports = {}里的plugins里写配置：

//可以打包在一个文件夹内
new MiniCssExtractPlugin({
			filename:"./css/index.css"
		}),

4.在终端输入npm run dev进行打包。