Source Map介绍 - webpack篇

╰半夏微凉° 2024-04-17 05:42 57阅读 0赞

# Source Map介绍 - webpack篇 #

在[webpack][]官网，我们可以看到关于生产sourcemap文件的模式一些介绍。下图

*  production为yes的为只能在生成环境中试用，开发环境中会不省心  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]

## cssmap生成 ##

1.  开启devtool
2.  不使用style-loader
3.  使用MiniCssExtractPlugin

module: { 
        rules: [
          { 
            test: /\.css$/i,
            use: [
              { 
                loader: MiniCssExtractPlugin.loader,
              },
              'css-loader', 
            ],
          },
        ]
     },
     plugins: [
       new MiniCssExtractPlugin({ 
         filename: './dist.css',
       })
     ],

## 试用UglifyJsPlugin时候的sourceMap配置 ##

module.exports = { 
      optimization: { 
        minimizer: [
          new UglifyJsPlugin({ 
            sourceMap: true,
          }),
        ],
      },
    };

## 其他的sourcemap配置 ##

{ 
      output: { 
        // Modify the name of the generated source map file.
        // You can use [file], [id], and [hash] replacements here.
        // The default option is enough for most use cases.
        sourceMapFilename: '[file].map', // Default
    
        // This is the source map filename template. It's default
        // format depends on the devtool option used. You don't
        // need to modify this often.
        devtoolModuleFilenameTemplate:
          'webpack:///[resource-path]?[loaders]'
      },
    }

## 高级配置插件 ##

*  `SourceMapDevToolPlugin` and `EvalSourceMapDevToolPlugin`

## 参考链接 ##

1.  [webpack Devtool][webpack]
2.  [Source Maps 文件内容介绍][Source Maps]
3.  [Webpack devtool source map 打包文件大小][Webpack devtool source map]

[webpack]: https://webpack.js.org/configuration/devtool/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/3b4f4f2e65914a87b0d7ddf1a21933df.png
[Source Maps]: https://survivejs.com/webpack/building/source-maps/
[Webpack devtool source map]: http://cheng.logdown.com/posts/2016/03/25/679045