4.Loader打包图片

打包图片

1.npm install file-loader --save-dev

2.默认配置文件webpack.config.js

const path=reuqire('path');

module.exports={

entry:'./src/index.js',//入口文件

output:{

          filename:'bundle.js',//出口打包文件名

          path:path.resolve(__dirname,'dist')//打包到的目录

        }，

module:{

        rules:{

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

                  use:[

                        {  loader:'file-loader',

                          options:{

                                     name(file) {

if(process.env.NODE_ENV==='development')                                            {return'[path][name].[ext]';

                             }

                       return'[hash].[ext]';
                        }

                         }

                      ]

                   }

         }

}

3.url-loader和file-loader的功能差不多，但图片更合适用url-loader,可对于常用的小图标做base64处理对于常更新的大图片生成路径存放于服务上。

 npm install file-loader --save-dev

const path=reuqire('path');

module.exports={

entry:'./src/index.js',//入口文件

output:{

          filename:'bundle.js',//出口打包文件名

          path:path.resolve(__dirname,'dist')//打包到的目录

        }，

module:{

        rules:{

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

                  use:[

                          loader：'url-loader'，

                         options:{

                             outputPath:'static/',

                              limit:2048,//小于2048kb就生成                                        base64  ，大于则生成到static下

                            name:[name]_[hash].[ext]

                              }

                      ]

                   }

         }

}