webpack加载html和图片

html加载器

在webpack-course下面将dist/index.html移到src下面并且删掉dist下面的bundle.js

mv dist/index.html src/
rm dist/bundle.js

在main.js里面引入index.html

require('./index.html')

安装加载html的loader

//mac电脑要加sudo
sudo npm i html-loader extract-loader file-loader

在module里面配置html相关的loader

            //html loader
            {
                test:/\.html$/,
                use:[
                    {
                        loader:"file-loader",
                        options:{
                            name:"[name].html"  //该loader用来给我们的html文件起名字
                        }   
                    },
                    {
                        loader:"extract-loader" //该loader用来区分bundle.html和我们写的html
                    },
                    {
                        loader:"html-loader"    //该loader用来加载html
                    }
                ]
            }

运行npm run build会在dist下面生成index.html 和bundle.js运行npm run start启动项目查看效果，可以发现以上过程就是实现了将src下面的index.html引入到main.js里面并且打包到dist文件夹下面

图片加载器

新建子文件夹src/images，随便引入几张图片，然后在index.html里面的img标签内引入图片

    <div>
        <img src="./images//img4.jpg" alt="">
    </div>

webpack.dev.js里面配置

            //image loader
            {
                test:/\.(jpg|gif|png)$/,
                use:[
                    {
                        loader:"file-loader",
                        options:{
                            name:"images/[name].[ext]"
                        }
                    }
                ]
            }

然后重新编译 启动就可以看见效果了

图片加载器
关于文件和图片的loader可以参考
https://blog.csdn.net/hjh15827475896/article/details/86249370