javascript - Webpack 无法正确解析 json 文件

Question

我在 Vue 页面中定义了以下方法：

getIsoCountryCode: function(country){
            console.log(countries);
            return "flag-icon-" + countries.getAlpha2Code(country, 'en');
        }

该函数返回flag-icon-undefined，即使当我在 Vue/Webpack 环境之外对其进行测试时它仍然有效。

网络包配置：

const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");

module.exports = {
  entry: "./lib/team-page/team.js",
  devtool: "source-map",
  watch: true,
  resolve: {
    alias: {
      flag_icon_css: __dirname + "/node_modules/flag-icon-css/css/flag-icon.css"
    }
  },
  output: {
    path: path.resolve(__dirname, "public/lib"),
    filename: "team.js"
  },
  mode: "development",
  module: {
    rules: [{
      type: 'javascript/auto',
      test: /\.(json|html)/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'file-loader',
        options: { name: '[name].[ext]' },
      }]
    },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.scss$/,
        use: [
            {loader: "style-loader"},

          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
            {loader: "style-loader"},

          {
            loader: "css-loader"
          }
        ]
      },
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      {
        test: /\.svg$/,
        loader: 'file-loader',
        options: {
          name: '../assets/flags/[name].[ext]'
        }
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
 };

我检查了调试器，在 Webpack 编译的文件中找到了这段代码：

var codes = __webpack_require__(/*! ./codes.json */ "./node_modules/i18n-iso-countries/codes.json");

它仍然指向该node_modules文件夹，即使我预计它会在捆绑包中。（编辑：这似乎无关紧要，axios 的定义方式相同，并且按预期工作。）

我将此处建议的规则添加到我的配置文件中，但它仍然不起作用。

编辑：要让它工作，你必须先注册语言环境。对于英语：countries.registerLocale(require("i18n-iso-countries/langs/en.json"));

标签： javascriptwebpack