Как изменить 'sourceMappingURL' с помощью webpack

моя производственная конфигурация webpack:

{
  output: {
    publicPath: "https://cdn.example.com/sub-directory/",
    filename: '[name]-[chunkhash].min.js'
  },

  devtool: 'source-map',

  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
}

теперь у меня есть два файла app-12345.min.js и app-12345.min.js.map.

Я также автоматически сгенерировал CDN URL https://cdn.example.com/sub-directory/app-12345.min.js для основного сценария.

но sourceMappingURL по-прежнему относительный путь //# sourceMappingURL=app-12345.min.js.map и не доступен непосредственно в браузере.

мой вопрос в том, как я могу установить sourceMappingURL как абсолютный автоматически генерируемый путь?

6
cdn javascript source-maps uglifyjs webpack

3 ответов

на SourceMapDevToolPlugin плагин-это вариант.

new webpack.SourceMapDevToolPlugin({
    filename: '[file].map',
    append: '\n//# sourceMappingURL=' + path + '[url]'
});
7

наконец, это возможно в Webpack 3 использование руководства из @omjответ и следующая конфигурация

  devtool: 'hidden-source-map', // SourceMap without reference in original file

  new webpack.SourceMapDevToolPlugin({
    filename: '[file].map',
    append: `\n//# sourceMappingURL=${path}[url]`
  })

обновление (Webpack v3.10.0):

новая опция была добавлена с Webpack v3.10.0. Опция называется publicPath:

new webpack.SourceMapDevToolPlugin({
  filename: '[file].map',
  publicPath: 'https://example.com/dev/'
});
4

С Webpack 2 Вы можете использовать скрытый источник-карта для devtool и баннер-webpack-плагин от https://github.com/lcxfs1991/banner-webpack-plugin и установить что-то вроде этого:

new banner({
    chunks: {
        "main": {
            afterContent: "\n//# sourceMappingURL=custom/url/to/map\n"
         }
    }
})
0