webpack - sirve - ¿Cuál es la mejor manera de incluir babel polyfill utilizando múltiples puntos de entrada?

pvc usos

Question

Estoy usando una configuración webpack usando múltiples puntos de entrada:

var fs = require(''fs'');
var webpack = require(''webpack'');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(''common.[hash].js'');

module.exports = {
    cache: true,
    entry: {
        main: ''./resources/assets/js/main.js'',
        services: ''./resources/assets/js/services.js''
    },
    output: {
        path: ''./public/assets/web/js'',
        filename: ''[name].[hash].js'',
        publicPath: ''/assets/web/js/'',
        chunkFilename: ''[id].[chunkhash].js''
    },
    resolve: {
        modulesDirectories: [''node_modules'', ''web_modules'', ''modules'']
    },
    module: {
        loaders: [{
            test: //.js$/,
            exclude: [/node_modules/, /web_modules/],
            loader: ''babel-loader'',
            query: {
                stage: 0
            }
        }]
    },
    plugins: [commonsPlugin,
        new webpack.ProvidePlugin({
            jQuery: ''jquery'',
            $: ''jquery'',
            ''window.jQuery'': ''jquery''
        }),
        function() {
            this.plugin(''done'', function(stats) {
                fs.writeFile(''./cache.json'', JSON.stringify({
                    hash: stats.hash
                }));
            });
        }
    ]
};

¿Hay alguna manera de incluir el polyfill de babel en mi configuración de paquete web? ¿O cuál es la mejor manera de incluirlo en mi configuración?

¿Tengo que incluirlo como requisito en todos mis módulos?

¡Muchas gracias por adelantado!

Answer 1

La forma más fácil sería cambiar

main: ''./resources/assets/js/main.js'',
services: ''./resources/assets/js/services.js''

ser

main: [''babel-polyfill'', ''./resources/assets/js/main.js''],
services: [''./resources/assets/js/services.js'']

para que el polyfill se cargue y ejecute como parte de cada punto de entrada sin que sus archivos necesiten saberlo.

Esto supone que tanto el main como los services se cargan en la misma página. Si son dos páginas separadas, desearía la entrada babel-polyfill en ambas matrices.

Nota

Lo anterior se aplica a Babel 5. Para Babel 6, npm install --save babel-polyfill y usar babel-polyfill lugar de babel/polyfill .

Answer 2

Una alternativa para el desarrollo (quizás no la mejor configuración para la producción) sería tener babel-polyfill en su propio módulo:

entry: {
    ''babel-polyfill'': [''babel-polyfill''],
    main: ''./resources/assets/js/main.js'',
    services: ''./resources/assets/js/services.js''
}

Antecedentes: probé la sugerencia en la respuesta anterior y seguía recibiendo un error: "Solo se permite una instancia de babel-polyfill". Estoy usando webpack 2, así que tal vez sea un factor. La solución anterior está bien para mis propósitos, ya que estoy escribiendo una biblioteca reutilizable para incluirla en aplicaciones más grandes, y solo quiero un paquete de demostración por separado en el repositorio de la biblioteca para fines de prueba. Pero para una aplicación completa, puede que no sea una buena idea requerir una solicitud HTTP adicional para cargar el polyfill en producción a menos que esté usando HTTP / 2.