1.之前打包css的方式我们使用style-loader，这里loader用于将js中的css代码引入html，引入的方式是在html中新建script标签，将css以代码的方式放入这个标签中。
如果我们希望像平常使用的那样，将js中的css代码提取到一个css文件中，再在html中用引入文件的方式引入css，就不能使用style-loader，这里使用mini-css-extract-plugin插件来代理style-loader插件
2.安装插件：npm install mini-css-extract-plugin -D
3.修改webpack.config.js文件，使用mini-css-extract-plugin插件：
const{resolve}=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//引入插件
module.exports={
entry:{
vender:['./src/js/jquery.js','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:resolve(__dirname,'build'),
filename:'[name].js'
},
mode:'development',
module:{
rules:[
//{test:/.css$/,use:['style-loader','css-loader']},
{test:/.css$/,use:[MiniCssExtractPlugin.loader,'css-loader']},//使用MiniCssExtractPlugin的loader代替style-loader
{test:/.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']},//使用MiniCssExtractPlugin的loader代替style-loader
{test:/.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']}//使用MiniCssExtractPlugin的loader代替style-loader
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['vender','index']
}),
new HtmlWebpackPlugin({
template:'./src/cart.html',
filename:'cart.html',
chunks:['vender','cart']
}),
new MiniCssExtractPlugin({//使用插件
filename:'index.css'//配置打包后的css文件的文件名，这里是将所有的css代码都打包在这一个文件内
}),
]
}