[JavaScript知识库]4、处理css文件（css-loader加载器与mini-css-extract-plugin分离CSS文件插件）

处理css文件（css-loader加载器）

• 1、webpack默认只认识js文件，但是webpack可以使用loader来加载预处理文件，允许webpack也可以打包js之外的静态资源。所以webpack如果要处理其他文件类型，需要安装配置相对应的loader加载器。
• 2、安装依赖：yarn add style-loader css-loader -D

yarn add style-loader css-loader -D

• 3、配置加载器，这样就可以导入css文件，css文件会打包到js文件中

	// 引入加载器
	module: {
		rules: [{ test: /\.css$/, user: ['style-loader', 'css-loader'] }]
	},

• 4、安装yarn add mini-css-extract-plugin -D插件，用来分离CSS文件和JS文件

yarn add mini-css-extract-plugin -D

• 5、引入依赖：const MiniCssExtractPlugin=require('mini-css-extract-plugin')
• 6、配置loader：loader:MiniCssExtractPlugin.loader

	// 引入加载器
	module: {
		rules: [{
			test: /\.css$/,
			user: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' }, },
			 'css-loader']
		}]
	},

• 7、配置插件plugins：

	// 引入插件
	plugins: [
		new HtmlWebpackPlugin({ template: './public/index.html' }),
		new MiniCssExtractPlugin({ filename: 'css/index.css' })
	]

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖