概述
上一篇文章介绍的是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一起配置的，大家也可以尝试下其他的配置方法呢。
