四、由浅入深 Webpack

发布于 2024-09-07 12:28:44 字数 10791 浏览 0 评论 0 收藏 0

4.1 文件处理

4.1.1 图片处理

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

处理需要用到的 loader

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

4.1.2 处理雪碧图、base64、压缩图片

module.exports = {
  module: {
     rules: [
      {
        test: /\.(css|less)$/,
        use:
        extractLess.extract({
          // 提取 css 并不会自动加入到文档中，需要在 HTML 手动加入 css 文件
          fallback: {
            loader: 'style-loader',
            options: { 
               //合并多个 style 为一个
              singleton:true
            }
          },
          // 处理 css
          use: [
            {
              loader: 'css-loader',
              options: {
                 minimize:true,
                 modules: true,
                 // css 模块化
                 localIdentName: '[path][name]_[local]_[hash:base64:5]'
            }
            },
            {
              loader: 'less-loader'
            },
            {
              loader: 'sass-loader'
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  // 合并雪碧图
                  require('postcss-sprites')({
                    // 指定雪碧图输出路径
                    spritePath: 'dist/assets/imgs/sprites',
                    retina: true // 处理苹果高清 retina 图片命名需要 xx@2x.png,对应的图片的 css 大小设置也要减小一半 
                  })
                ]
              }
            }
          ]
        })
      },
      {
        test: /\.(png|jpg|gif)$/,
        use:[
          //{
          //  loader: //'file-loader',//处理图片
          //  options: {
          //     publicPath:'',// 使得图片地址可以访问
          //     outputPath: 'dist/'
          //     useRelativePath:true
            //}
          
          //}
          // url-loader 会把图片转成 base64
          {
            loader: 'url-loader',
            options: {
              name: '[name].min.[ext]' //5kb 内会转成 base64 ,否则输出图片路径
              limit: 1000, 
              publicPath:'',
              outputPath: 'dist/',
              useRelativePath:true
            }
          },
          // 压缩图片
          {
            loader: 'img-loader',
            options: {
              pngquant: {
                //图片质量
                quality:80
              }
            }
          },
          
        ]
      }
    ]
  }
}

4.1.2 处理字体文件

file-loader
url-loader

module.exports = {
  module: {
     rules: [
      {
        test: /\.(css|less)$/,
        use:
        extractLess.extract({
          // 提取 css 并不会自动加入到文档中，需要在 HTML 手动加入 css 文件
          fallback: {
            loader: 'style-loader',
            options: { 
               //合并多个 style 为一个
              singleton:true
            }
          },
          // 处理 css
          use: [
            {
              loader: 'css-loader',
              options: {
                 minimize:true,
                 modules: true,
                 // css 模块化
                 localIdentName: '[path][name]_[local]_[hash:base64:5]'
            }
            },
            {
              loader: 'less-loader'
            },
            {
              loader: 'sass-loader'
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  // 合并雪碧图
                  require('postcss-sprites')({
                    // 指定雪碧图输出路径
                    spritePath: 'dist/assets/imgs/sprites',
                    retina: true // 处理苹果高清 retina 图片命名需要 xx@2x.png,对应的图片的 css 大小设置也要减小一半 
                  })
                ]
              }
            }
          ]
        })
      },
      {
        test: /\.(png|jpg|gif)$/,
        use:[
          //{
          //  loader: //'file-loader',//处理图片
          //  options: {
          //     publicPath:'',// 使得图片地址可以访问
          //     outputPath: 'dist/'
          //     useRelativePath:true
            //}
          
          //}
          // url-loader 会把图片转成 base64
          {
            loader: 'url-loader',
            options: {
              name: '[name].min.[ext]' //5kb 内会转成 base64 ,否则输出图片路径
              limit: 1000, 
              publicPath:'',
              outputPath: 'dist/',
              useRelativePath:true
            }
          },
          // 压缩图片
          {
            loader: 'img-loader',
            options: {
              pngquant: {
                //图片质量
                quality:80
              }
            }
          },
          // 处理字体文件
          {
            test: /\.(eot|woff2|woff|ttf|svg)$/,
            use: [
              {
                loader:'url-loader',
                options: {
                  name: '[name].min.[ext]' //5kb 内会转成 base64 ,否则输出图片路径
                  limit: 5000, 
                  publicPath:'',
                  outputPath: 'dist/',
                  useRelativePath:true
                }
              }
            ]
          }
          
        ]
      }
    ]
  }
}

4.1.3 处理第三方 JS 库

处理第三方库用到 providePlugin 、 imports-loader

1.providePlugin

以引入 jQuery 为例

npm i jquery

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      // 在全局注入 jQuery 变量
      $:'jquery'
    })
  ]
}

引入本地 libs 中的 jQuery

module.exports = {
  resolve: {
    alias: {
      // $确切匹配 把 jQuery 这个关键字解析到某个目录下
      jquery$:path.resolve(__dirname,'src/libs/jquery.min.js')
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      // 在全局注入 jQuery 变量
      $:'jquery'
    })
  ]
}

2.imports-loader

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

4.2 HTML in webpack(自动生成 HTML)

自动生成 HTML ，把这个页面需要的 js 、 css 插入到页面中

4.2.1 生成 HTML

htmlWebpackPlugin

options

template
filename
minify 是否压缩
chunks
inject 是否让 css、js 通过标签形式插入到页面中

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  plugin:[
    new htmlWebpackPlugin({
      filename:'index.html', // 不传默认 index.html
      template: './index.html',//传入模板
      inject:true,//控制 js\css 是否插入到页面
      minify: {
        collapseWhitespace:true //压缩空格
      },
      chunks:['app']//指定 chunks 会把跟这个入口相关的 chunks 插入到页面中
    })
  ]
}

4.2.2 HTML 中引入图片

需要用到 html-loader

html-loader

options

attrs: [img:src]

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath:'/' //网站路径为/ 图片等资源引用不会发生错误
  },
  module:{
    rules:[
      {
        loader: 'url-loader',
        options: {
          name: '[name].min.[ext]' //5kb 内会转成 base64 ,否则输出图片路径
          limit: 1000, 
          publicPath:'',
          outputPath: 'assets/imgs/',
          //useRelativePath:true // 这里不能使用这个 因为图片路径在 HTML 中、css 中都存在，打包的时候图片会放错地方。需要用到绝对路径，在 output 指定 publicPath:'/'
        }
      },
      // 处理 HTML 中的图片引用路径问题
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              attrs: ['img:src','img:data-src']
            }
          }
        ]
      }
    ]
  }
}

require 在 HTML 中引入图片

<img src="${require('./public/imgs/xx.png)}" />

4.2.3 配合优化

提前载入 webpack 加载代码

inline-manifest-webpack-plugin
html-webpack-inline-chunk-plugin

建议使用 html-webpack-inline-chunk-plugin

npm i html-webpack-inline-chunk-plugin

var HTMLInlieChunk = require('html-webpack-inline-chunk-plugin')

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath:'/'
  },
  plugin:[
    new htmlWebpackPlugin({
      filename:'index.html', // 不传默认 index.html
      template: './index.html',//传入模板
      inject:true,//控制 js\css 是否插入到页面
      minify: {
        collapseWhitespace:true //压缩空格
      },
      chunks:['app']//指定 chunks 会把跟这个入口相关的 chunks 插入到页面中
    })
    new webpack.mdtimize.CommonsChunkPlugin({
      name: 'manifest'
    })
    new HTMLInlieChunk({
      inlineChunks: ['manifest'] //把 webpack 生成的 manifest 提取到 HTML 文件 script 中，减少请求
    })
  ]
}