webpack插件之extract-text-webpack-plugin

作用

extract-text-webpack-plugin插件主要是为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象。

安装

npm i extract-text-webpack-plugin -D

使用

在webpack.config.js中进行配置

1.引入extract-text-webpack-plugin

const ExtractTextPlugin = require('extract-text-webapck-plugin')

2.在plugins中配置

plugins: [
	new ExtractTextPlugin({
		filename: 'style/[name].min.css' // 配置提取出来的css名称
	})
]

3.在module中配置

module: {
	rules: [{
		test: /\.(css|less)$/,
		use: ExtractTextPlugin.extract({
			fallback: {
				loader: 'style-loader',
				options: {
					singleton: true // 表示将页面上的所有css都放到一个style标签内
				}
			},
			use: [{
				{
					loader: 'css-loader',
					options: {
						sourceMap: true
					}
				},
				{
					loader: 'postcss-loader',
					options: {
						sourceMap: true
					}
				},
				{
					loader: 'less-loader',
					options: {
						sourceMap: true
					}
				}
			}]
			
		})
	}]
}