关于vue-cli:vuecli-sourcemap私有化部署配置

88次阅读

共计 2934 个字符，预计需要花费 8 分钟才能阅读完成。

先抛出我的疑难：为什么 vue-cli sourcemap 私有化部署这个解决方案很少有人提，网上搜到的根本都是说 sourcemap 配置（开关和模式等根底配置）的货色，尽管说 sourcemap 私有化部署配置比拟好实现，但我在 vue-cli4 生成的我的项目中发现这里还是有个小坑的，故，以此记录

咱们先关上 vue-cli 的文档看下相干配置

// vue.config.js
module.exports = {
  // options...
  productionSourceMap: true, // 默认是 true，接管的是布尔值
}

哦？没了？没了，sourcemap publicPath？不存在！也就是咱们压根不能通过简略的批改配置做到私有化部署 sourcemap 的需要，那怎么办？必定是批改 webpack 配置了！用 SourceMapDevToolPlugin 啊！这里的具体用法我不再赘述，毕竟文档都贴出来了

OK，咱们开始吧 …… 很快，咱们就写好了，如下

const webpack = require('webpack')

module.exports = {
  productionSourceMap: true, // 默认是 true，接管的是布尔值
  chainWebpack: config => {config.plugin('SourceMapDevToolPlugin')
    .use(webpack.SourceMapDevToolPlugin).tap(args => {  
      return [{filename: '[file].map',  
        publicPath: 'https://exmaple.com/',  
        moduleFilenameTemplate: 'source-map'  
      }]
    })  
  }}

而后你兴奋的去运行 npm run build
……
可是你发现在打包后的 js 开端呈现两个 sourcemap 指向，这是不对的，而后你开始各种猜测，各种尝试，发现就是不行，要么这不行，要么那不行的（手动坏笑）
怎么办？

vue-cli 是开发工具，打包是基于 webpack 的，那咱们就去看 webpack 咯，看看 vue-cli 最终生成的 webpack 配置到底是什么，到底是哪里出错了不就能找到问题的起因了吗？那怎么办呢？好在 cli 提供了这样的命令，毕竟 webpack 的确配置太简单了
点击查看审查我的项目的 webpack 配置文档

运行 vue inspect --mode production > output.js 后咱们发现 …… 咱们发现很多方才尝试的那么多为什么不胜利的起因，每个人尝试的都不同，我只说最后咱们遇到的问题吧——为什么会有两个 sourcemap 指向，对了，这里提一下在审查 webpack 配置时加上的 --mode production 如果咱们不加上这句那默认审查的配置就是 development 模式下的了，那你可能还是找不到起因，好了，咱们看下输入的配置

// output.js
{
  // options...
  devtool: 'source-map',
  optimization: {
    // options...
    minimizer: [ 
      new TerserPlugin({
        // options...
        sourceMap: true
      })
    }
  },
  plugins: [
    // other plugins...
    new SourceMapDevToolPlugin({filename: '[file].map',  
      publicPath: 'https://example.com/',  
      moduleFilenameTemplate: 'source-map'  
    })
  ]
}

bingo，抛去 css 相干的 sourcemap 配置项，咱们看到这三个相干配置
devtool : 此选项管制是否生成，以及如何生成 sourcemap
TerserPlugin : 应用 terser 去压缩 js 代码的插件，相似 uglifyJSPlugin
SourceMapDevToolPlugin : 该插件实现了对 sourcemap 生成，进行更细粒度的管制。它能够代替 devtool 选项
留神，SourceMapDevToolPlugin 是代替 devtool，而在咱们的配置里却是并存的，既有 devtool 也有 SourceMapDevToolPlugin，所以导致呈现了两个 sourcemap 的指向
so? 怎么解决呢？干掉 devtool? 那是肯定的，你绝不能干掉 SourceMapDevToolPlugin，因为咱们须要配置 sourcemap 的 publicPath, 而 devtool 是不反对的，怎么改呢？哈哈，祝贺你，你又遇到了一个新问题

其实，咱们在排查两个 sourcemap 指向的时候就应该去翻看 cli 的源码了，实际上我自己就是这样的，而且这应该是比较简单的，但这须要你绝对相熟 cli 和 webpack，而且我集体感觉间接去看 webpack 的配置对你的剖析、了解更好
很显然，通过 build 命令咱们晓得，第一工夫就应该去看 cli-service，而 vue-cli 的配置里最相干的就是 productionSourceMap 了，那好，咱们间接在源码里全局搜 productionSourceMap，而后，咱们看到

很显著 productionSourceMap 间接管制着 devtool 和 Terser 的 sourcemap, 也就是说咱们不能简略的通过将 productionSourceMap 设置为 false 而解决两个 sourcemap 指向的问题，我置信聪慧的你在最后肯定尝试过这个计划，但后果很显然是 NO！而这就是起因，阐明一下，在应用 SourceMapDevToolPlugin 时肯定要将压缩插件的 sourcemap 设置为 true，否则将不会生成 sourcemap，更谈不上对 sourcemap 的更细粒度的管制了

当然，这里我带大家饶了一段路，其实在上一步，怎么干掉 devtool 时，肯定有人想到间接通过 configureWebpack 或 chainWebpack 批改 webpack 配置就行了，实际上我晓得的最简略的的确如此，但写了这么一段是因为我想带你们和我一块看看，哈哈，毕竟多看看又没害处，或者你有播种呢

const webpack = require('webpack')

module.exports = {
  productionSourceMap: process.env.NODE_ENV === 'production',
  chainWebpack: config => {config.devtool(false)
  
    if (process.env.NODE_ENV === 'production') {config.plugin('SourceMapDevToolPlugin')
      .use(webpack.SourceMapDevToolPlugin).tap(args => {  
        return [{filename: '[file].map',  
          publicPath: 'https://exmaple.com/',  
          moduleFilenameTemplate: 'source-map'  
        }]
      })
    }
  }}

正文完