I am using webpack in my project and the project has to be run on IE8 enterprise mode.I used following babel loaders to transform to es3
transform-es3-member-expression-literals transform-es3-property-literals
suggested by this answer : Babel 6.0.20 Modules feature not work in IE8
I tried babel-polyfill,transform runtime also.But nothing seems to be working.
My makewebpackconfig file looks like this:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var AppCachePlugin = require('appcache-webpack-plugin');
var appConfigObj = require('./server.js');
var appPort = 3000;
// var es3MemberExpressionLiterals = require('babel-plugin-transform-es3-member-expression-literals');
// var es3PropertyLiterals = require('babel-plugin-transform-es3-property-literals');
var es3ifyPlugin = require('es3ify-webpack-plugin');
var appHost = '11.126.44.112';
module.exports = function(options) {
var entry, jsLoaders, plugins, cssLoaders, devtool;
console.log('options webconfig-->', options, 'directory name', __dirname);
// If production is true
if (options.prod) {
console.log('producaiton minifcation');
// Entry
entry = [
// 'babel-polyfill',
path.resolve(__dirname, 'js/app.js') // Start with js/app.js...
];
cssLoaders = ['file-loader?name=[path][name].[ext]', 'postcss-loader'];
// Plugins
plugins = [ // Plugins for Webpack
// new es3ifyPlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: false
}),
new HtmlWebpackPlugin({
template: 'index.html', // Move the index.html file...
minify: { // Minifying it while it is parsed using the following, self–explanatory options
removeComments: false,
collapseWhitespace: false,
removeRedundantAttributes: false,
useShortDoctype: false,
removeEmptyAttributes: false,
removeStyleLinkTypeAttributes: false,
keepClosingSlash: true,
minifyJS: false,
minifyCSS: true,
minifyURLs: false
}
})
// new es3MemberExpressionLiterals(),
// new es3PropertyLiterals()
];
// If app is in development
} else {
devtool = 'cheap-source-map';
// Entry
entry = [
// 'babel-polyfill',
"webpack-dev-server/client?http://localhost:3000", // Needed for hot reloading
"webpack/hot/only-dev-server", // See above
path.resolve(__dirname, 'js/app.js') // Start with js/app.js...
];
cssLoaders = ['style-loader', 'css-loader', 'postcss-loader'];
// Only plugin is the hot module replacement plugin
plugins = [
// new es3ifyPlugin(),
new webpack.HotModuleReplacementPlugin() // Make hot loading work
// new es3MemberExpressionLiterals(),
// new es3PropertyLiterals()
]
}
return {
devtool: devtool,
entry: entry,
output: { // Compile into js/build.js
path: path.resolve(__dirname, 'build'),
filename: "js/bundle.js"
},
module: {
loaders: [{
test: /\.js$/, // Transform all .js files required somewhere within an entry point...
loader: 'babel', // ...with the specified loaders...
exclude: path.join(__dirname, '/node_modules/'), // ...except for the node_modules folder.
plugins: [
// 'transform-runtime',
'babel-plugin-transform-es3-property-literals',
'babel-plugin-transform-es3-member-expression-literals',
]
}, {
test: /\.css$/, // Transform all .css files required somewhere within an entry point...
loaders: cssLoaders // ...with PostCSS
}, {
test: /\.jpe?g$|\.gif$|\.png$/i,
loader: "url-loader?limit=100000"
}, {
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}, {
test: /\.js$/,
exclude: /node_modules/,
loaders: ['es3ify', 'babel'],
}]
},
plugins: plugins,
postcss: function() {
return [
require('postcss-import')({ // Import all the css files...
onImport: function(files) {
files.forEach(this.addDependency); // ...and add dependecies from the main.css files to the other css files...
}.bind(this) // ...so they get hot–reloaded when something changes...
}),
require('postcss-simple-vars')(), // ...then replace the variables...
require('postcss-focus')(), // ...add a :focus to ever :hover...
require('autoprefixer')({ // ...and add vendor prefixes...
browsers: ['last 2 versions', 'IE > 8'] // ...supporting the last 2 major browser versions and IE 8 and up...
}),
require('postcss-reporter')({ // This plugin makes sure we get warnings in the console
clearMessages: true
})
];
},
target: "web", // Make web variables accessible to webpack, e.g. window
stats: false, // Don't show stats in the console
progress: true
}
}
I am making some mistake ,but unable to find it.Can anyone suggest a way out of this problem?
Note : I am excluding node modules in babel loader.I can see the error in plotly.js file included in nodemodules.Following error are seen in console when opening in enterprise mode IE11 and enterprise node IE8 Expected identifier at line xxxx. On clicking on the error it takes to catch statement in bundle.js. Thanks