markshapiro / webpack-merge-and-include-globally

Merge multiple files (js, css..) and include by running them "as is". Supports minify by custom transform and wildcard paths.
MIT License
102 stars 27 forks source link

Support for source maps #10

Closed GusAntoniassi closed 6 years ago

GusAntoniassi commented 6 years ago

Hi, first of all thanks for this plugin! I am trying to generate the source map of the merged files, so far I have only been able to do so like this:

let minifyOpts = {
    sourceMap: {
        filename: 'scripts.min.js',
        url: 'scripts.min.js.map'
    }
};

module.exports = {
  // ...
  plugins: [
    new MergeIntoSingleFilePlugin({
      files: {
        'scripts.min.js': jsFiles,
        'scripts.min.js.map': jsFiles
      },
      transform: {
        'scripts.min.js': code => uglifyJS.minify(code, minifyOpts).code,
        'scripts.min.js.map': code => uglifyJS.minify(code, minifyOpts).map,
      },
    }),
  ]
}

It works but it kinda stinks... Is there an "official" or better way to do this? Thanks in advance!

markshapiro commented 6 years ago

its the only way, I haven't thought about maps, I'm thinking about making files option also accept array:

files: [{
    src:['1.js', '2.js', ...],
    dest: code => {
        const min = uglifyJS.minify(code, minifyOpts);
        return {
            'scripts.min.js':min.code,
            'scripts.min.js.map': min.map,
        }
    },
//  dest: 'scripts.js' // without transform
}]

what are your thoughts?

GusAntoniassi commented 6 years ago

Hi Mark, I think this way would be great! It would become pretty flexible for doing stuff other than minification too.

GusAntoniassi commented 6 years ago

Hey Mark, just a heads up, the method I posted for building the source maps wasn't working on Google Chrome. Not sure why, but I had to remove url: 'scripts.min.js.map' from minifyOpts. I will try to build a more concise test case and I'll submit it to UglifyJS repo.

markshapiro commented 6 years ago

could it be because you generated code & map from 2 separate uglifyJS?

markshapiro commented 6 years ago

added & updated.

GusAntoniassi commented 6 years ago

Hey Mark, thanks for the update! I'll check it out as soon as I get back to working on my webpack feature!

could it be because you generated code & map from 2 separate uglifyJS?

Maybe, but it's odd that just removing the url param from uglify made it work. I'll test it and let you know.

GusAntoniassi commented 6 years ago

Hey Mark, I've just tested 2.1.5 and it's working great! Thank you so much for developing this feature!

Regarding the url param, I had to keep it commented. Apparently Chrome isn't source mapping when there is a //# sourceMappingURL=bundle.min.js.map comment at the end of the file. Tested it on Firefox and it's working fine, with and without the source map comment at the end.

I'll try to build a reproducible test case and submit it as a bug report on Chrome.

Thanks for the attention!