07 webpack4.0学习笔记——配置文件_minCssExtract使用

概述

        上一篇文章介绍的是sass-loader的使用，通过它我们将scss文件转换成css文件然后打包到了js结果文件中，那其实这种做法在实际项目中是并不推荐的，因为它没有很好的将css和js进行分离。

        本文介绍的“MiniCssExtractPlugin”这个插件，可以将scss文件转换打包后输出到css文件中，其他的js文件打包后输出到js文件，实现代码分离，接下来我们详细介绍其使用方法。

具体操作步骤

        1、此处使用的demo还是之前一直使用的demo代码，我们按照官网的安装命令来安装此插件，如图：

npm install --save-dev mini-css-extract-plugin

        2、安装完成之后我们在配置文件中引入，如下：

        3、引入插件之后，在module的同级别上创建一个plugins字段属性，然后配置minicssextract插件的代码，如下：

        4、本文我们还是打包处理我们上一篇文章创建的test.scss文件，所以我们接下来还要在sass-loader的配置中更改一下之前的代码，如下：

        此处代码配置参考官网上sass-loader结合插件的使用方法部分配置的，大家在实际开发中也要经常翻看官网的示例。

        配置文件完整代码所示：

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

module.exports={
	entry:'./input.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'output.bundle.js'
	},
	mode:'development',
	plugins: [
		new MiniCssExtractPlugin({
		  // Options similar to the same options in webpackOptions.output
		  // both options are optional
		  filename: '[name].css',
		  chunkFilename: '[id].css',
		}),
	],
	module:{
		rules:[
			{
				test:/.(png|jpg|gif)$/i,
				use:[
					{
						loader:'url-loader',
						options:{
							limit:919200
						}
					}
				]
			},
			{
			  test: /.(js|jsx)$/,
			  exclude: /(node_modules|bower_components)/,
			  use: {
				loader: 'babel-loader',
				options: {
				  presets: ['@babel/preset-env'],
				  plugins: ['@babel/plugin-transform-react-jsx']
				}
			  }
			},
			{
			  test: /.scss$/,
			  use: [
				  // fallback to style-loader in development
                MiniCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
			  ]
			}
		]
	}
};

        5、更改完成之后，执行打包，此时可以看到，dist的结果目录下生成了一份js文件和一份css文件，这样就做到了代码分离，有利于我们后期维护：

总结

        本文介绍MiniCssExtractPlugin这个插件的基本使用方法，因为本文使用的还是上文创建的scss文件，所以在配置的时候是结合sass-loader一起配置的，大家也可以尝试下其他的配置方法呢。