zoukankan      html  css  js  c++  java
  • webpack(v4.0.0以下)浅析

    // url-loader:和file-loader类似,不过他能将比limit小的图片转成base64,limit以上依然由file-loader来解析
    
    module.exports = {
      module: {
        rules: [
          {
            test: /.(png|jpg|gif)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                },
              },
            ],
          },
        ],
      },
    };
    
    // style-loader | css-loader | sass-loader
    module.exports = {
      module: {
        rules: [
          {
            test: /.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              'style-loader',
              // Translates CSS into CommonJS
              'css-loader',
              // Compiles Sass to CSS
              'sass-loader',
            ],
          },
        ],
      },
    };
    hash摘要
    
    Hash 文件名(vendor.f02bc2.js)是实现持久化缓存的第一步,目前 webpack 有两种计算 hash 的方式:
    
    计算所有 chunks 的 hash —— [hash]
    为每个 chunk 计算 hash —— [chunkhash]
    第一种是每次编译生成一个唯一 hash,适合 chunk 拆分不多的小项目,但所有资源全打上同一个 hash,无法完成持久化缓存的需求。
    
    第二种是 webpack 为每个 chunk 资源都生成与其内容相关的 hash 摘要,为不同的资源打上不同的 hash。

    webpack 迁移指南(从v3迁移到v4)

    // url-loader:和file-loader类似,不过他能将比limit小的图片转成base64,limit以上依然由file-loader来解析
    
    module.exports = {
      module: {
        rules: [
          {
            test: /.(png|jpg|gif)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                },
              },
            ],
          },
        ],
      },
    };
    
    // style-loader | css-loader | sass-loader
    module.exports = {
      module: {
        rules: [
          {
            test: /.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              'style-loader',
              // Translates CSS into CommonJS
              'css-loader',
              // Compiles Sass to CSS
              'sass-loader',
            ],
          },
        ],
      },
    };
    hash摘要
    
    Hash 文件名(vendor.f02bc2.js)是实现持久化缓存的第一步,目前 webpack 有两种计算 hash 的方式:
    
    计算所有 chunks 的 hash —— [hash]
    为每个 chunk 计算 hash —— [chunkhash]
    第一种是每次编译生成一个唯一 hash,适合 chunk 拆分不多的小项目,但所有资源全打上同一个 hash,无法完成持久化缓存的需求。
    
    第二种是 webpack 为每个 chunk 资源都生成与其内容相关的 hash 摘要,为不同的资源打上不同的 hash。
    

      

    webpack开发模式和生产模式都内置了一些插件,注意它们的差别

     

  • 相关阅读:
    css的盒子模型由什么组成?
    div盒子水平、垂直居中
    display:none和visibility:hidden的区别
    创建一个多选框,且和文本关联起来(单击文本就像单击该选框一样)
    Canvas和SVG的不同
    js两个页面之间通过URL传参数
    css a标签去除下划线
    css 设置文本垂直居中
    css 边框圆角的方法
    html 文本框css设置边框圆角
  • 原文地址:https://www.cnblogs.com/ft039x/p/11582678.html
Copyright © 2011-2022 走看看