Question

我是webpack的新手。我正在尝试编写一个AngularJS 2网站，并且要求我希望CSS / LESS / HTML / JS / TS文件中的某些字符串替换为从属性文件中获取的值。

我的属性文件看起来像这样：

example.properties

branding.title=My Awesome Website
support.telephoneNumber=+441111111111
...

我想以这种格式在我的文件中放置令牌：

example.html的

<html>
   <head>${branding.title}</head>
   ...
</html>

在上面我希望装载机用我的真棒网站替换 $ {branding.title} 。

是否有现有的webpack加载器允许我在构建之前作为初始步骤执行这些替换？

我只需要某种形式的令牌替换加载器 - 我不介意包含令牌及其替换文本的文件格式与我上面给出的格式不同。同样，我也不介意在文件中定义令牌的方式（例如 $ {branding.title} ）是不同的。

Answer 1

使用html-webpack-plugin

可以实现这一点

在webpack.config.js文件中执行属性文件的导入，希望它在一些格式良好的文件类型中，如JSON。如果不是，您将需要解析webpack.config中的文件。理想情况下，如果可以的话，只需将您的.properties文件设为所有JSON即可。还导入html-webpack-plugin。将html-webpack-plugin添加到你的插件数组中。然后在模板html文件中，您将能够访问配置中的变量。

webpack.config.js看起来像这样：

var config = require('../pathToProperties/example.properties.json');
var HtmlWebpackPlugin = require('html-webpack-plugin');
export.module = {
    // Your webpack config
    //...
    meta : config,
    plugins : [
         new HtmlWebpackPlugin({
             template : './src/index.html' // Where your index.html template exists
         })
    ]
};

在HTML中

<head><%= webpackConfig.metadata.branding.title%></head>

Webpack 2

<强> webpack.config.js

var config = require（'../ pathToProperties / example.properties.json'）;

plugins: [
     ...
     new HtmlWebpackPlugin({
            template: 'src/index.html',
            metadata: config,
          })

<强>的index.html

<title><%= htmlWebpackPlugin.options.metadata.customValue%></title>

Answer 2

我设法弄清楚如何做到这一点（虽然我不确定它是最好的解决方案）。

我正在使用此处的webpack入门套件：angular2-webpack-starter

我首先使用 npm

string-replace-webpack-plugin

然后我创建了一个 properties.json 文件，内容如下：

{
  "branding": {
    "title": "My awesome website",
    "colour": "#00cc00"
  }
}

然后我将此添加到 webpack.common.js 文件的顶部：

const properties = require('./properties.json');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const string_replacement_loader = StringReplacePlugin.replace({
  replacements: [
    {
      pattern: /\${(.*)}/g,
      replacement: function (match, p1, offset, string) {
        return eval('properties.' + p1);
      }
    }
  ]});

然后我在 webpack.common.js 文件的加载器部分添加了此内容：

{
  test: /\.css$/,
  loaders: [
    'to-string-loader',
    'css-loader',
    string_replacement_loader
  ]
},
{
  test: /\.html$/,
  loaders: [
    'raw-loader',
    string_replacement_loader
  ],
  exclude: [helpers.root('src/index.html')]
},

然后我将其添加到 webpack.common.js 文件的插件部分：

new StringReplacePlugin（）

然后我能够将 $ {branding.title} 和 $ {branding.colour} 等令牌添加到我的html和css文件中，一切似乎都出来了如预期的那样。

这个解决方案有一个缺点（如果你还没有注意到），上面排除 src / index.html 。我通过调整 webpack.common.js 中 METADATA 的定义来解决这个问题，如下所示：

const METADATA = {
  title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
  baseUrl: '/',
  isDevServer: helpers.isWebpackDevServer(),
  properties: properties
};

然后，我可以在 src / index.html 中引用我的属性，如下所示：

<title><%= webpackConfig.metadata.properties.branding.title %></title>

当然，在这个特殊情况下，我可以在 METADATA 本身的定义中替换 title 属性，如下所示：

const METADATA = {
  title: properties.branding.title,
  baseUrl: '/',
  isDevServer: helpers.isWebpackDevServer()
};

然后在 src / index.html 中引用它，如下所示（这是入门工具包默认在此文件中定义的方式）：

<title><%= webpackConfig.metadata.title %></title>

是否有一个webpack加载器用于替换属性文件中的值的字符串

2 个答案:

Webpack 2