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{

     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进行打包