webpack - 文件处理

最新推荐文章于 2024-08-23 08:45:32 发布

原创最新推荐文章于 2024-08-23 08:45:32 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何利用Webpack插件优化前端项目资源，包括图片处理、字体文件处理及第三方JS库集成，提升网页加载速度。

一，图片处理

图片处理的场景

CSS中引入的图片
自动合成雪碧图
压缩图片
Base64 编码

用到的技术或插件

file-loader //css中引入图片
url-loader //base64 编码
img-loader //压缩图片
postcss-sprites //合成雪碧图

1，安装所需插件

npm install file-loader url-loader img-loader postcss-sprites imagemin imagemin-pngquant --save-dev

2，file-loader 引入图片

//配置webpack.config.js
module:{
  rules:[
       {
         test:/\.(png|jpg|jpeg|gif)$/,
          use:[
              {
                  loader:'file-loader',
                  options:{
                      // limit:'1024',
                      name:'[name].[ext]',       //输出图片的原名。name:文件名。ext:文件后缀名
                      publicPath:'assets/imgs/',
                     	outputPath:'assets/imgs/'   //将文件打包到dist文件的assets/imgs/中
                  }
              }
          ]
      }
   ]
}

3，url-loader base64 编码

//配置webpack.config.js
module:{
  rules:[
      {
        test:/\.(png|jpg|jpeg|gif)$/,
         use:[
             {
                 loader:'url-loader',
                 options:{
                     limit:1024,                // 表示小于1MB的图片转为base64,大于1MB的是路径
                     name:'[name].[ext]',       //输出图片的原名。name:文件名。ext:文件后缀名
                     publicPath:'assets/imgs/',  //将文件打包到dist文件的assets/imgs/中
                     outputPath:'assets/imgs/'   //将文件打包到dist文件的assets/imgs/中
                 }
             }
         ]
     }
  ]
}

4，img-loader 压缩图片
图片压缩需要使用img-loader，除此之外，针对不同的图片类型，还要引用不同的插件。比如，我们项目中使用的是 png 图片，因此，需要引入imagemin imagemin-pngquant，并且指定压缩率。需要安装imagemin imagemin-pngquant：npm install imagemin imagemin-pngquant --save-dev

module:{
  rules:[
      {
        test:/\.(png|jpg|jpeg|gif)$/,
         use:[
             {
                 loader:'url-loader',
                 options:{
                     limit:1024,                // 表示小于1MB的图片转为base64,大于1MB的是路径
                     name:'[name].[ext]',        //输出图片的原名。name:文件名。ext:文件后缀名
                     publicPath:'assets/imgs/',  //将文件打包到dist文件的assets/imgs/中
                     outputPath:'assets/imgs/'   //将文件打包到dist文件的assets/imgs/中
                 }
             },
             {
               loader: 'img-loader',
                options: {
                  plugins: [
                    require('imagemin-pngquant')({
                      quality: '80' // 图片压缩率
                    })
                  ]
                }
              }
         ]
     }
  ]
}

5，postcss-sprites 生成雪碧图
GitHub：https://github.com/2createStudio/postcss-sprites

module:{
      rules:[
          {
              test:/\.less$/,
              use:ExtractTextWebpackPlugin.extract({
                  fallback:{
                      loader:'style-loader',
                      options:{
                          insertInto:'#app',  //插入到dom
                          singleton:true,      //是否只使用一个style标签
                          transform:'./css.transform.js'  //转化，浏览器环境下，插入页面前
                          // insertAt    //插入的位置
                      }
                  },
                  use:[
                      {
                          // css-loader
                          //     options
                          //         alias  (解析的别名)
                          //         inportLoader  (@import)
                          //         Minimize   (是否压缩)
                          //         modules     (是否启用css-modules)
      
                          // css-modules
                          //     :local  给定一个本地的，局部的样式
                          //     :global 给定一个全局的样式
                          //     compose 可以继承一段样式
                          //     compose ... from path   从别的文件中引入样式
                          loader:'css-loader'
                          // options:{
                          //     minimize:true
                          // }
                          // loader:'file-loader'
                      },
                      {
                          loader:'postcss-loader',    //这个要放在css-loader和less-loader之间   
                          options:{
                              ident:'postcss',
                              plugins:[
                                  require('postcss-sprites')({    //生成雪碧图
                                      spritePath:'assets/imgs/sprites',    //生成到指定的文件夹下
                                      retina:true	//定义是否在文件名中搜索视网膜标记
                                  }),
                                  require('autoprefixer')(),   //可以在这里引入，也可以在上面引入
                                  require('postcss-cssnext')()
                              ]
                          }
                      },
                      {
                          loader:'less-loader'
                      }
                  ]
              })
              
          }
      ],
    },

二，字体文件处理

暂无

三，处理第三方JS库（providePlugin、imports-loader）

用到的技术或插件
webpack.providePlugin
imports-loader
window
1，可以通过cdn引入第三方库，这里以jquery为例

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

2，通过本地安装jquery插件（webpack.providePlugin） npm install jquery --save-dev

//安装插件
npm install jquery --save-dev

//webpack.config.js
plugins:[
   new webpack.ProvidePlugin({
        $:'jquery'
    })
]

3，下载到本地的jquery文件（webpack.providePlugin）

//webpack.config.js
module.exports = {   
    resolve:{
        alias:{
            jquery$:path.resolve(__dirname,'src/libs/jquery.min.js')
        }
    },
    plugins:[
        new webpack.ProvidePlugin({
            $:'jquery'
        })
    ]
}

4，下载到本地的jquery文件（imports-loader）

//安装插件
npm install imports-loader --save-dev

//webpack.config.js
 module:{
   rules:[
       {
         test:path.resolve(__dirname,'src/app.js'),
         use:[
             {
                 loader:'imports-loader',
                 options:{
                     $:'jquery'
                 }
             }
         ]
        }
    ],
},