HMR_souce-map_oneof_babel缓存优化

最新推荐文章于 2024-09-23 09:57:08 发布

前端攻城fff

最新推荐文章于 2024-09-23 09:57:08 发布

阅读量116

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack工程化文章标签： webpack

本文链接：https://blog.csdn.net/qq_50646256/article/details/120245495

webpack工程化专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了webpack的热模块替换(HMR)、source-map的配置与选择，以及如何优化开发环境和生产环境的构建速度与调试体验。重点讲解了HMR在css和js中的实现，source-map的不同类型及其应用场景，以及如何根据需求选择合适的source-map类型。同时，文章还提供了webpack配置示例，包括babel缓存和html入口的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HMR: css的style-loader自己实现了, 只需要devServe中hot: true即可, html不需要, 因为只有一个文件, 不要热模块替换, 改了就是改了, 不牵连其他, js中需要配置:

// 通过module.hot判断是否开启了HMR
if (module.hot) {
  // 如果开启了就去检测某个引入的文件是否变化, 如果变化了就单独重新执行该模块里引入的方法或对象
  module.hot.accept('./print', () => {
    print()
  })
}

souce-map在devtools中设置, 有好些不同值, 代表不同的用法, 开发环境常用eval-source-map, 生产环境常用source-map, 具体如下

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
1. source-map：外部
  错误代码准确信息和源代码的错误位置
2. inline-source-map：内联
  只生成一个内联source-map
  错误代码准确信息和源代码的错误位置
3. hidden-source-map：外部
  错误代码错误原因，但是没有错误位置
  不能追踪源代码错误，只能提示到构建后代码的错误位置
4. eval-source-map：内联
  每一个文件都生成对应的source-map，都在eval
  错误代码准确信息和源代码的错误位置
5. nosources-source-map：外部
  错误代码准确信息, 但是没有任何源代码信息
6. cheap-source-map：外部
  错误代码准确信息和源代码的错误位置
  只能精确的行
7. cheap-module-source-map：外部
  错误代码准确信息和源代码的错误位置
  module会将loader的source map加入
内联和外部的区别及选择
1. 外部生成了文件，内联没有 2. 内联构建速度更快
开发环境：速度快，调试更友好
速度快(eval>inline>cheap>…)
eval-cheap-souce-map
eval-source-map
调试更友好
souce-map
cheap-module-souce-map
cheap-souce-map

–> eval-source-map

生产环境：源代码要不要隐藏? 调试要不要更友好
内联会让代码体积变大，所以在生产环境不用内联
nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

–> source-map / cheap-module-souce-map

oneof即命中一次就停止检索loader

babel缓存在babel-loader的options中设置cacheDirectory为true即可, 兼容性处理的代码是固定的, 一般不需要每次都要更新

具体配置见下方:


/* eslint-disable */
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
process.env.NODE_ENV = 'development'

module.exports = {
  // 增加html入口解决HMR开启后更改html页面不更新问题
  entry: ['./src/js/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // 不止匹配一次的放在外面, 但是里面也可以放一个
      {
        // 使用oneOf让每个test匹配即下面的每一个对象只命中一次就停止, 因为下面只有一个处理, 匹配到了不停止继续匹配对性能浪费
        oneOf: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          },
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
              presets: [
                [
                  // 需要这个插件来按照corejs规则来编译
                  '@babel/preset/env',
                  {
                    // 按需引入
                    useBuildIns: 'usage',
                    corejs: { version: 3 },
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ],
              // 开启babel缓存, 有时候js改了一部分但是缓存的兼容性处理方法很多时候不用改
              cacheDirectory: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    // g-zip压缩
    compress: true,
    port: 3000,
    // 自动打开浏览器
    open: true,
    // 使用HMR热模块替换
    hot: true
  },
  /*
  [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

  source-map：外部
    错误代码准确信息 和 源代码的错误位置
  inline-source-map：内联
    只生成一个内联source-map
    错误代码准确信息 和 源代码的错误位置
  hidden-source-map：外部
    错误代码错误原因，但是没有错误位置
    不能追踪源代码错误，只能提示到构建后代码的错误位置
  eval-source-map：内联
    每一个文件都生成对应的source-map，都在eval
    错误代码准确信息 和 源代码的错误位置
  nosources-source-map：外部
    错误代码准确信息, 但是没有任何源代码信息
  cheap-source-map：外部
    错误代码准确信息 和 源代码的错误位置 
    只能精确的行
  cheap-module-source-map：外部
    错误代码准确信息 和 源代码的错误位置 
    module会将loader的source map加入

  内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

  开发环境：速度快，调试更友好
    速度快(eval>inline>cheap>...)
      eval-cheap-souce-map
      eval-source-map
    调试更友好  
      souce-map
      cheap-module-souce-map
      cheap-souce-map

    --> eval-source-map

  生产环境：源代码要不要隐藏? 调试要不要更友好
    内联会让代码体积变大，所以在生产环境不用内联
    nosources-source-map 全部隐藏
    hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

    --> source-map / cheap-module-souce-map
*/
  devtool: 'source-map'

}