今天带来webpack的css图片引入教程

1.下载file-loader

cnpm i -D file-loader

2.在webpack.config.js中配置

 const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={//node.js语法导出一个对象
    entry:'./src/app.js',
    output:{
        path:path.resolve(__dirname,'dist'),//绝对路径
        filename:'main.js',
    },
    plugins:[//生成html
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'src/index.html'
        })
    ],
    module:{
        rules:[{
                test:/\.js$/,
                use:[{
                    loader:'babel-loader',
                    options:{
                        presets:['react']
                    }
                },]},
                {
                    test:/\.css$/,
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.jpg$/,
                    use:['file-loader']
                },
        ]
    },
    devServer:{
        open:true,//自动打开服务器首页
        port:9000,
        inline:true,
    }
}

3.app.css中引入图片做背景图

.rea{background: url("../img/11.jpg")}

4.重新运行

cnpm run start

5.退出服务器模式，用 cnpm run dev 命令使文件在输出目录生成