标签：搭建 新版本 速度 没有 无法定位 http ade 反向 head
前言：在写这篇文章之前，我必须要吐槽一下webpack了。特别喜欢更新版本，更新就算了，文档还跟不上。文档真的让人迷惑了，大爷的。
背景：由于我正在写sourceMap反向定位源码的功能，所以最近需要使用到webpack的source-map配置。因为公司webpack的版本有2.0和4.0的，所以在做sourceMap配置的时候，真的是花费了很大的气力。无力吐槽，我们看正文吧
===============================================================================
= 开源项目：前端监控系统 --- 只需要简单几步，就可以搭建一套属于自己的前端监控系统，快试试吧。 =
===============================================================================
SourceMap是一种映射关系。当项目运行后，如果出现错误，我们可以利用sourceMap反向定位到源码。
const path = require(‘path‘); module.exports = { devtool: ‘none‘, // SourceMap的模式（见下表） entry: ‘./src/index.js‘, // 入口文件 output: { filename: ‘bundle.js‘, // 文件名 path: path.resolve(__dirname, ‘dist‘) // 文件夹 } }
SourceMap不同模式的特点（见下表）
| 模式 | 解释 |
|---|---|
| eval | 每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL. |
| source-map | 生成一个SourceMap文件（编译速度最慢） |
| hidden-source-map | 和 source-map 一样，但不会在 bundle 末尾追加注释. |
| inline-source-map | 生成一个 DataUrl 形式的 SourceMap 文件. |
| eval-source-map | 每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap. |
| cheap-source-map | 生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap） |
| cheap-module-source-map | 生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。 |
const buildConfig = { mode: "production", output: { path: distPath, filename: "./js/[name].[hash].min.js", publicPath: "./" }, plugins: [ new UglifyJSPlugin({ // 1. 这个配置必须 sourceMap: true }), ].concat(baseConfig.htmlArray), devtool: "source-map" // 2. 这个配置必须 }
sourceMap 正确配置如下：
const buildConfig = { mode: "production", output: { path: distPath, filename: "./js/[name].[hash].min.js", publicPath: "./" }, optimization: { // 1. 这个配置必须 minimize: false }, plugins: [ ].concat(baseConfig.htmlArray), devtool: "source-map" // 2. 这个配置必须 }
标签：搭建 新版本 速度 没有 无法定位 http ade 反向 head
原文地址：https://www.cnblogs.com/warm-stranger/p/12015860.html
