webpack(4)配置打包css

1.这里打包css的方式使用css-loader和style-loader，css-loader用于将js中引入的css打包在一起，style-loade用于将js中引入的css引入到html中。

2.首先安装css-loader和style-loader：npm install css-loader style-loader -D

3.在（3）的文件基础上面，再建一个index.css文件：

#Box{     width: 200px;     height: 200px;     color: blue;     background-color: red; } 在index.html中加入代码：
<div id="Box">         Box     </div> 将css引入到index.js中： require('../css/index.css') 4.完整的webpack.config.js文件：
const{resolve}=require('path'); const HtmlWebpackPlugin = require('html-webpack-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']}//加入规则使用css-loader个style-loader来加载以.css为后缀的文件。这里两个loader的顺序不能写反，是先使用后面那个css-loader将css和js打包在一起，再使用style-loader来加载js中的css文件         ]     },     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']         }),     ] } 5.执行npx webpack进行打包