如何配置Webpack 4以支持import.meta.url？

可以通过自定义loader或者Babel插件让Webpack 4支持import.meta.url，下面是两种可行的方案：

方案一：使用@open-wc/webpack-import-meta-loader #

这个loader专门用来处理import.meta.url，将其转换为Webpack 4能识别的代码：

• 首先安装依赖：

npm install --save-dev @open-wc/webpack-import-meta-loader

• 修改Webpack配置文件，在module.rules中添加规则：

module.exports = {
  // 其他已有配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          // 如果项目已经在用Babel-loader，保留这个配置
          'babel-loader',
          '@open-wc/webpack-import-meta-loader',
        ],
      },
    ],
  },
};

它会自动把import.meta.url转换成Webpack兼容的表达式，比如将new URL('./asset.png', import.meta.url)这类代码处理成Webpack能解析的资源引用。

方案二：使用Babel插件babel-plugin-transform-import-meta #

通过Babel在编译阶段转换语法，适配Webpack 4环境：

• 安装依赖：

npm install --save-dev babel-plugin-transform-import-meta

• 在Babel配置文件（比如babel.config.js）中添加插件：

module.exports = {
  presets: ['@babel/preset-env'], // 项目已有的Babel预设
  plugins: [
    ['babel-plugin-transform-import-meta', {
      module: 'webpack', // 指定针对Webpack环境做转换
    }],
  ],
};

确保Webpack配置中已经启用babel-loader处理JS文件，这样Babel会在代码编译时完成import.meta.url的兼容转换。

注意事项 #

如果用import.meta.url加载静态资源（图片、字体等），需要确保Webpack已经配置了对应的资源loader（比如file-loader、url-loader），转换后的代码才能正确解析资源路径。

内容的提问来源于stack exchange，提问作者Sergey Sochienko