说明

一个简单的将文件中的占位符替换为指定内容的webpack loader。

使用示例

根据环境变量替换静态资源的公共路径。

// webpack.config.js
const isDev = process.env.NODE_ENV === "development";
module.exports = {
  //... 其他配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          //... 其他loader
          {
            loader: "placeholder-replace-loader",
            // 当前只有如下三个配置
            options: {
              // 是否忽略分隔符中两端的空格（默认值： true）
              ignoreSpace: true, 
              // 占位分隔符 （默认值：["%{", "}"]）
              delimiters: ["%{", "}"],
              // 定义占位符以及替换值
              rules: {
                PUBLIC_PATH: isDev ? "" : "/dist",
              }
            }
          }
        ],
      }
    ]
  }
}

// index.vue
<template>
  <div>
    <img src="%{ PUBLIC_PATH }/banner.png" />
    <img :src="src" />
  </div>
</template>
<script>
export default{
  computed:{
    src(){
      return "%{ PUBLIC_PATH }/banner.png"
    }
  }
}
</script>

注意事项

• 在vue项目中使用的时候应该避免定义 @ . ~ 字符做为占位分隔符的第一个字符。因为会与vue-loader中的路径处理判断冲突

• 替换的处理只是单纯的把文件内容进行字符串正则匹配替换，应该要注意在loaders中执行的顺序

• 当前没有对占位分隔符参数合法性的判断，请规范的定义占位符，避免出现预期之外的错误