首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

NormalModuleReplacementPlugin

NormalModuleReplacementPlugin 允许你用 newResource 替换与 resourceRegExp 匹配的资源。如果 newResource 是相对路径,它会相对于先前的资源被解析。如果 newResource 是函数,它将会覆盖之前被提供资源的请求。

这对于允许在构建中的不同行为是有用的。

代码语言:javascript
复制
new webpack.NormalModuleReplacementPlugin(
  resourceRegExp,
  newResource
)

基本示例

在构建开发环境时替换特定的模块。

假设你有一个配置文件 some/path/config.development.module.js 并且在生产环境有一个特殊的版本 some/path/config.production.module.js

只需在生产构建时添加以下插件:

代码语言:javascript
复制
new webpack.NormalModuleReplacementPlugin(
  /some\/path\/config\.development\.js/,
  './config.production.js'
);

高级示例

根据指定环境的条件构建。

假设你想要一个为了不同构建目标的特定值的配置。

代码语言:javascript
复制
module.exports = function(env) {
  var appTarget = env.APP_TARGET || 'VERSION_A';
  return {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/(.*)-APP_TARGET(\.*)/, function(resource) {
        resource.request = resource.request.replace(/-APP_TARGET/, `-${appTarget}`);
      })
    ]
  }

}

创建两个配置文件:

app/config-VERSION_A.js

代码语言:javascript
复制
export default {
  title : 'I am version A'
}

app/config-VERSION_B.js

代码语言:javascript
复制
export default {
  title : 'I am version B'
}

然后使用您在regexp中查找的关键字导入该配置:

代码语言:javascript
复制
import config from 'app/config-APP_TARGET';
console.log(config.title);

现在,您只需输入正确的配置,具体取决于您要构建的目标:

代码语言:javascript
复制
webpack --env.APP_TARGET VERSION_A
=> 'I am version A'

webpack --env.APP_TARGET VERSION_B
=> 'I am version B'

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com