欢迎来到[自学php网] ①群 287460651

主页 > 前端 > webpack >

webpack的CSS图片引入教程

来源:未知    时间:2020-02-24 10:41 作者:小飞侠 阅读:

[导读] 今天带来webpack的css图片引入教程 1.下载file-loader cnpmi-Dfile-loader 2.在webpack.config.js中配置 constpath=require(path);consthtmlWebpackPlugin=require(html-webpack-plugin);module.exports={//node.js语法导出一个对象...

今天带来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 命令使文件在输出目录生成


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com