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$/, 30                     use:['file-loader'] 31                 },
        ]
    },
    devServer:{
        open:true,//自動打開服務器首頁
        port:9000,
        inline:true,
    }
}

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

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

　　

4.重新運行

cnpm run start

5.退出服務器模式，用 cnpm run dev 命令使文件在輸出目錄生成