如何在Vaadin应用程序中配置webpack.config.js？从node_modules导入CSS / PNG (Leaflet库)

在Vaadin应用程序中配置webpack.config.js可以通过以下步骤完成：

确保你的Vaadin应用程序使用了Vaadin 14或更高版本，因为在这些版本中，Vaadin引入了Webpack作为前端构建工具。
在你的Vaadin项目的根目录下创建一个名为webpack.config.js的文件。
打开webpack.config.js文件，并添加以下内容：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'node_modules/leaflet/dist/images', to: 'images' },
        { from: 'node_modules/leaflet/dist/leaflet.css', to: 'leaflet.css' }
      ]
    })
  ]
};

上述配置中，我们使用了CopyWebpackPlugin插件来复制Leaflet库的CSS和图片文件到Vaadin应用程序的构建输出目录。

保存并关闭webpack.config.js文件。
在你的Vaadin项目的package.json文件中，添加以下脚本命令：

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development --inline --hot"
}

上述配置中，我们添加了build和start两个脚本命令，用于构建和启动Vaadin应用程序。

现在，你可以在你的Vaadin应用程序中使用Leaflet库了。在你的代码中导入CSS和图片文件的方式如下：

import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Div;

@CssImport(value = "./leaflet.css", themeFor = "vaadin-leaflet-default-theme")
public class LeafletMap extends Div {
  // ...
}

上述代码中，我们使用@CssImport注解导入了Leaflet库的CSS文件。