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进行打包
原文地址:https://www.cnblogs.com/maycpou/p/14513874.html