0

I have the following webpack config:

const path = require('path');

const webpack = require('webpack');


function NoOpPlugin(options) {
    // Setup the plugin instance with options...
}
NoOpPlugin.prototype.apply = function(compiler) {
    compiler.plugin('done', function(){});
};


module.exports = {
    entry: {
        main: __dirname + '/src/public/mainapp/app.js'
    },
    output: {
        path: __dirname + "/assets/dist",
        filename: '[name].min.js',
    },
    externals: {
        window: 'window'
    },
    module: {
        loaders: [
            {
                test: /\.modernizrrc.js$/,
                loader: "modernizr"
            },
            {
                test: /\.modernizrrc(\.json)?$/,
                loader: "modernizr!json"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    "presets": [
                        ["env", {
                            "targets": {
                                "browsers": [
                                    "> 1%",
                                    "last 2 versions"
                                ]
                            },
                            "useBuiltIns": true
                        }]
                    ],
                    "plugins": [
                        "inferno",
                        "transform-decorators-legacy",
                        "transform-object-rest-spread"
                    ]
                }
            },
            {
                test: /\.js$/,
                loader: "eslint-loader",
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        alias: {
            modernizr$: path.resolve(__dirname, ".modernizrrc")
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                BROWSER: JSON.stringify(true),
                NODE_ENV: JSON.stringify(process.env.NODE_ENV || '')
            }
        }),
        process.env.NODE_ENV === 'production' ? new webpack.optimize.UglifyJsPlugin() : new NoOpPlugin()
    ]
}

If I place import 'babel-polyfill'; at the beginning of my app.js file babel-preset-env will transform it to only use the polyfills I need.

I'd like webpack to insert the polyfills without having to modify my source though. I know I can change my entrypoint to ['babel-polyfill', __dirname + '/src/public/mainapp/app.js'], but then every polyfill gets added to the output whether I need it or not. Any way to do this while still selecting just the polyfills I need?

Seán Hayes
  • 4,060
  • 4
  • 33
  • 48
  • It seems like your two goals are at odds. Unless you want to write your own Webpack plugin, I think you're stuck with making a file for the polyfills. What's your aversion to modifying your source? You could always add a file that loads the polyfills then `app.js`. – loganfsmyth Jan 26 '17 at 16:13
  • I just think it would be cleaner if I could insert the polyfill via the config than to specify it in my application code. I'm also compiling multiple apps with webpack, and I'd like to minimize code reuse to reduce the potential for mistakes (e.g. changing a polyfill statement in one app but not another). – Seán Hayes Jan 26 '17 at 18:49

0 Answers0