-
Star
(183)
You must be signed in to star a gist -
Fork
(20)
You must be signed in to fork a gist
-
-
Save couto/b29676dd1ab8714a818f to your computer and use it in GitHub Desktop.
| var webpack = require('webpack'); | |
| var HtmlWebpackPlugin = require('html-webpack-plugin'); | |
| var path = require('path'); | |
| var folders = { | |
| APP: path.resolve(__dirname, '../app'), | |
| BUILD: path.resolve(__dirname, '../build'), | |
| BOWER: path.resolve(__dirname, '../bower_components'), | |
| NPM: path.resolve(__dirname, '../node_modules') | |
| }; | |
| var config = { | |
| entry: { | |
| app: [ | |
| 'webpack/hot/dev-server', | |
| "./js/app.js" | |
| ] | |
| }, | |
| debug: true, | |
| resolve: { | |
| extensions: ['', '.js', '.jsx', '.scss'], | |
| alias: { | |
| //'es6-promise': path.join(folders.NPM, 'es6-promise', 'es6-promise.js'), | |
| //'fetch': path.join(folders.NPM, 'whatwg-fetch', 'fetch.js'), | |
| } | |
| }, | |
| stats: { | |
| colors: true, | |
| reasons: true, | |
| }, | |
| output: { | |
| path: __dirname + '/build', | |
| publicPath: '/', | |
| filename: '[name].[hash].js', | |
| chunkFilename: '[id].[hash].js' | |
| }, | |
| module: { | |
| loaders: [ | |
| { | |
| test: /\.s?css$/, | |
| exclude: /node_modules/, | |
| loaders: [ | |
| 'style', | |
| 'css', | |
| 'autoprefixer?browsers=last 2 version', | |
| 'sass?' + ['outputStyle=nested'].join('&') | |
| ] | |
| }, | |
| { test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, | |
| { test: /\.json$/, loader: 'json' }, | |
| ] | |
| }, | |
| plugins: [ | |
| new webpack.HotModuleReplacementPlugin(), | |
| new webpack.ProvidePlugin({ | |
| 'Promise': 'es6-promise', // Thanks Aaron (https://gist.github.com/Couto/b29676dd1ab8714a818f#gistcomment-1584602) | |
| 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' | |
| }), | |
| //new webpack.optimize.CommonsChunkPlugin('app', null, false), | |
| new webpack.NoErrorsPlugin(), | |
| new HtmlWebpackPlugin({ | |
| template: path.resolve('./', 'index.html'), | |
| webpackDevServer: '/webpack-dev-server.js' | |
| }) | |
| ] | |
| }; | |
| module.exports = config; |
@couto ganda truta! 👍
🐟
@tarikjn i am getting a Exception thrown and not caught in IE11 when i use babel-polyfill instead of es6 promise .
entry: ['babel-polyfill', 'whatwg-fetch','./src/main.js'],
but this works perfect in IE11
entry: ['es6-promise', 'whatwg-fetch','./src/main.js']
Is there a way to have the polyfills loaded from a seperated chunk?
I wish that when a browser is lacking a feature it loads the predeclared polyfill (which would be put in a chunk by webpack). So that the final bundle size does not contain all the polyfills.
Is this possible somehow?
@vikas5914, I'm getting the exact same. Did you solve this in the end, as I would rather keep using babel-polyfill
Adding polyfills through entry - defines them in global scope. If you own an application (SPA for example), I think It's Ok, but if you are working on the library, I don't recommend this approach.
if you use webpack 2 you need to change import -> import-loader and export -> export-loader
new webpack.ProvidePlugin({
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
})Can we use webpack.ProvidePlugin to conditionally load polyfills? Essentially load polyfills if browser don't support natively.
+1
🥇
good job!
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const folders = {
APP: path.resolve(__dirname, '../app'),
BUILD: path.resolve(__dirname, '../build'),
BOWER: path.resolve(__dirname, '../bower_components'),
NPM: path.resolve(__dirname, '../node_modules')
};
const config = {
entry: {
app: [
'webpack/hot/dev-server',
"./js/app.js"
]
},
debug: true,
resolve: {
extensions: ['', '.js', '.jsx', '.scss'],
alias: {
//'es6-promise': path.join(folders.NPM, 'es6-promise', 'es6-promise.js'),
//'fetch': path.join(folders.NPM, 'whatwg-fetch', 'fetch.js'),
}
},
stats: {
colors: true,
reasons: true,
},
output: {
path: __dirname + '/build',
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].js'
},
module: {
loaders: [
{
test: /\.s?css$/,
exclude: /node_modules/,
loaders: [
'style',
'css',
'autoprefixer?browsers=last 2 version',
'sass?' + ['outputStyle=nested'].join('&')
]
},
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.json$/, loader: 'json' },
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
'Promise': 'es6-promise', // Thanks Aaron (https://gist.github.com/Couto/b29676dd1ab8714a818f#gistcomment-1584602)
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
}),
//new webpack.optimize.CommonsChunkPlugin('app', null, false),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
template: path.resolve('./', 'index.html'),
webpackDevServer: '/webpack-dev-server.js'
})
]
};
module.exports = config;In case someone has this error on firebase
https://stackoverflow.com/questions/44908044/babel-not-polyfilling-fetch-when-using-babel-preset-env/64791611#64791611
I fixed it like this
@tarikjn
Works for me too, thanks!