Git Product home page Git Product logo

uglify-loader's Introduction

uglify-loader

Uglify loader for webpack

To install

npm install uglify-loader --save-dev

Use Case

Webpack has UglifyJSPlugin that uglifies the output after bundling. In the applications that depend on thirdparty libraries you may want to uglify with mangling only your application code but not the code that you don't control.

Example

Webpack 1

module: {
    loaders: [
        {
            // I want to uglify with mangling only app files, not thirdparty libs
            test: /.*\/app\/.*\.js$/,
            exclude: /.spec.js/, // excluding .spec files
            loader: "uglify"
        }
    ]
}

You can pass UglifyJS parameters via 'uglify-loader' property of webpack config.

module: {
    loaders: [
        {
            // I want to uglify with mangling only app files, not thirdparty libs
            test: /.*\/app\/.*\.js$/,
            exclude: /.spec.js/, // excluding .spec files
            loader: "uglify"
        }
    ]
},
'uglify-loader': {
    mangle: false
}

Webpack 2

module: {
    rules: [
        {
            // I want to uglify with mangling only app files, not thirdparty libs
            test: /.*\/app\/.*\.js$/,
            exclude: /.spec.js/, // excluding .spec files
            use: 'uglify-loader'
        }
    ]
}

You can pass UglifyJS parameters via loader options.

module: {
    rules: [
        {
            // I want to uglify with mangling only app files, not thirdparty libs
            test: /.*\/app\/.*\.js$/,
            exclude: /.spec.js/, // excluding .spec files
            use: {
                loader: 'uglify-loader',
                options: {
                    mangle: false
                }
            }
        }
    ]
}

uglify-loader's People

Contributors

bestander avatar istr avatar jribe avatar nikhilmat avatar osela avatar zheeeng avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

uglify-loader's Issues

module build error with crafted HTML input

ModuleBuildError: Module build failed: 
    at DependenciesBlock.onModuleBuildFailed (/app/fe/webpack-html-fail/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/app/fe/webpack-html-fail/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /app/fe/webpack-html-fail/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/app/fe/webpack-html-fail/node_modules/webpack-core/lib/NormalModuleMixin.js:173:4)
    at nextLoader (/app/fe/webpack-html-fail/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /app/fe/webpack-html-fail/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/app/fe/webpack-html-fail/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /app/fe/webpack-html-fail/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)

Here's the minimal input:
https://github.com/graingert/webpack-html-fail

Using this loader along with script-loader and sourcemaps

Hi,
sorry for opening an issue which is not actually an issue :) I'm currently using script-loader to pack my javascript into the webpack file, and generate a sourcemap using webpack. Here's the config:

var config = {
    entry: {
      news: './news.js'
    },
    devtool: 'source-map',
    debug: true,
    output: {
      path: './bin',
      filename: '[name].js',
      sourceMapFilename: "[file].map.js"
    },
  };

This generates two files, news.js and news.js.map.js. The "packed" script in news.js are not minified, so I found your project which seems to do what i need, but after packing the scripts with "script-loader" and "uglify-loader", the sourcemap from webpack refers to the minified files, and i'm confused on how to use the sourcemap generated by uglify (

uglify-loader/index.js

Lines 21 to 24 in cda8249

var sourceMap = JSON.parse(result.map);
sourceMap.sources = [sourceFilename];
sourceMap.file = current;
sourceMap.sourcesContent = [source];
)

Here's an excerpt from my news.js file:

require("script!uglify!../../polling.js");
require("script!uglify!../../normalize.js");

So, my request is: how can I have the sourcemap of the un-uglified code? Do i need to start using the uglify one? How can i put all of it in a single file like webpack does?

How to chain with script-loader?

I'd like to use uglify-loader to uglify files required with the script-loader.

My code looks as follows:

require('uglify-loader');
require('uglify!script!../lib/form2js/form2js');

When doing this I get the following error:

Module not found: Error: Cannot resolve module 'fs'
in ~/project/node_modules/uglify-loader/node_modules/uglify-js/tools
 @ ./~/uglify-loader/~/uglify-js/tools/node.js 2:9-22

Support for source maps

When I use the UglifyJsPlugin the generated source maps contain the original (un-uglified) code. However, when I use this loader, the source maps contain the uglified code.

I really like this loader because it gives me better flexibility that the plugin, but I would still like to have useful source maps.

Needs update to webpack 2

Users following the example in the README will get an error:

For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { uglify-loader: ... } }) ]

Webpack 2 uses a different method for module configuration. There are other differences as well. I don't know how many of them are impactful.

I'm willing to figure this one out and submit a pull request, but first I need to know if this loader is still actively maintained.

Source maps don't work when used with `babel-loader`

In our application, load our JS files by first parsing through babel-loader and then uglify-loader. When enabling source maps, it successfully maps the minified file to the unminified version, however, it does not preserve the source map generated by the babel-loader.

Removing the uglify-loader fixes this issue.

Am I doing something wrong? I can't get them to be combined such that the file maps to the original source.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.