Assume we are implementing a module which has its own localization files (.properties)

import '../scss/index.scss';
import '../localization/my-module.en-US.properties'

We need to add a new file loader in webpack.config.js

  module: {
    loaders: [
      {
          test: /\.(ttf|eot|png|svg|woff(2)?)(\?[a-z0-9]+)?$/,
          loader: 'file-loader',
      },
      {
          test: /\.properties$/,
          loader: 'file-loader?name=[name].[ext]',
      }
    ]
  }

Then we will get the same file name in output folder (/dist), and so far we can include that in index.html because mozL10n needs to parse the document.head to know about the localization files.

<link rel="localization" href="dist/my-module.{locale}.properties">

Further improvement

Once we import a new module which is having localization files, we need to add all the localization files into index.html. It seems redundant. We should make webpack be able to generate total properties just like ExtractTextPlugin.

Comments

comments powered by Disqus