OpenLayers v3 with Webpack - node.js

Question

Hello I am currently using OpenLayers v3 with Webpack. It works fine when I am not using UglifyJS. But the moment I added my uglifyJS config, it just won't compile anymore
My UglifyJS config
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: false,
compress: {
warnings: false,
sequences: true,
dead_code: true,
conditionals: true,
booleans: true,
unused: true,
if_return: true,
join_vars: true,
drop_console: true
}
}),
And i get this error
from UglifyJs RangeError: Maximum call stack size exceeded
I am using the dist/ol.js file.
Any idea how to solve this?

Answer 1

This is how I load ol3 in my webpack project :
webpack.config.js :
...
resolve: {
alias: {
openlayers3: "openlayers/dist/ol.js",
},
},
plugins: [
new webpack.ProvidePlugin({
ol: "openlayers3",
}),
]
...
ProvidePlugin load modules and make them globally available in your app. You don't have to import ol3 in your js files anymore.
https://webpack.github.io/docs/list-of-plugins.html#provideplugin

Answer 2

Had the same issue here. Resolved by moving openlayers into its own chunk using CommonsChunkPlugin, then ignoring that chunk in UglifyJsPlugin.
entries:
entry: {
vendor: Object.keys(packageDotJson.dependencies),
openlayers: ['openlayers'],
app: './src/index.jsx'
}
CommonsChunkPlugin:
new webpack.optimize.CommonsChunkPlugin({
names: ["openlayers", "vendor"],
minChunks: Infinity,
filename: "[name].[hash].js"
}),
UglifyJsPlugin:
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
exclude: 'openlayers'
}),
Then included in the html template using HtmlWebpackPlugin:
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>