Question

您好我目前正在使用Openpackay v3和Webpack。当我不使用UglifyJS时，它工作正常。但是当我添加我的uglifyJS配置时，它就不再编译了

我的UglifyJS配置

     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
        }
    }),

我得到了这个错误

from UglifyJs RangeError: Maximum call stack size exceeded

我正在使用dist/ol.js文件。

知道如何解决这个问题吗？

Answer 1

这就是我在webpack项目中加载ol3的方法：

webpack.config.js：

...

resolve: {
  alias: {
    openlayers3: "openlayers/dist/ol.js",
  },
},

plugins: [
  new webpack.ProvidePlugin({
    ol: "openlayers3",
  }),
]

...

ProvidePlugin加载模块并使其在您的应用中全局可用。你不必再在你的js文件中导入ol3了。

https://webpack.github.io/docs/list-of-plugins.html#provideplugin

Answer 2

这里有同样的问题。通过使用CommonsChunkPlugin将openlayers移动到自己的块中解决，然后在UglifyJsPlugin中忽略该块。

输入：

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'
}),

然后使用HtmlWebpackPlugin包含在html模板中：

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>

使用Webpack的OpenLayers v3

2 个答案: