Webpack 使用url-loader和file-loader打包资源文件

在js中不仅可以通过import引入js文件，还可以引入图片、视频等资源文件，这样webpack打包时就会把所引入的资源文件也一起打包进来

打包进来的文件会返回一个字符串：即文件的路径

要做到这一点，需要一个工具，file-loader，使用方法很简单那

1. 安装

npm install file-loader --save-dev

2. 配置

{

    test: /\.(png|jpg|jpeg|gif)$/,

    use: [

        {

            loader: 'file-loader',

            options: {

                //配置公共资源路径

                publicPath: './',

                //配置输出路径

                outputPath: 'images/'

            }

        }

    ]

},

配置其中的 publicPath 与 output 配置中的 publicPath 作用一直，如果两者都设置了，那么以 output 下的 publicPath 为准，上面配置最终文件输出位置为 /images/[hash].png

为了优化小图片的加载，可以使用url-loader将小于一定尺寸的图片转成base64

注意：url-loader是依赖于file-loader的，所以这两个包都必须安装

{

    test: /\.(png|jpg|jpeg|gif)$/,

    use: [

        {

            loader: 'url-loader',

            options: {

                //小于这个尺寸的文件会转成base64，大于的会自动调用file-loader

                limit: 8192

            }

        }

    ]

},

巴特西

Webpack 使用url-loader和file-loader打包资源文件

最新文章

热门文章