Gathering detailed insights and metrics for webpack-replace-loader
Gathering detailed insights and metrics for webpack-replace-loader
Gathering detailed insights and metrics for webpack-replace-loader
Gathering detailed insights and metrics for webpack-replace-loader
string-replace-loader
Replace loader for Webpack
file-replace-loader
file-replace-loader is webpack loader that allows you replace files in compile time
@fu1996/var-color-replace-loader
a webpack loader can replace var color
regexp-replace-loader
A webpack loader to replace a regexp pattern with a string
A Webpack loader for replacing strings && 一个 Webpack 打包时用来替换字符串的 Loader
npm install webpack-replace-loader
Typescript
Module System
Node Version
NPM Version
JavaScript (88.81%)
HTML (10.38%)
Less (0.81%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
48 Stars
23 Commits
9 Forks
2 Watchers
6 Branches
1 Contributors
Updated on Sep 20, 2024
Latest Version
5.0.1
Package Id
webpack-replace-loader@5.0.1
Unpacked Size
7.75 kB
Size
3.42 kB
File Count
4
NPM Version
8.19.3
Node Version
16.19.0
Published on
Feb 06, 2024
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
一个 webpack 打包时用来替换字符串的 webpack-loader 。
1 . 在使用 webpack 项目打包的时候,用来将开发环境的请求 URL 替换为 生产环境的 URL 。
2 . 项目统一查找调整页面配色样式 color
, 将 #00ff00
替换为 #ff0700
。
3 . 大型项目中,依照打包策略在相关文件中写入不同内容。
webpack v5,请安装Tag: v5.0.0+ webpack v4,请安装Tag: v4.0.0+ (正在编写中) webpack v3,请安装Tag: v1.0.0+
将 webpack-replace-loader
作为依赖安装到项目:
1 npm install webpack-replace-loader --save-dev
配置webpack打包策略:
1module: { 2 loaders: [ 3 ... 4 { 5 test: /test\.js$/, 6 loader: 'webpack-replace-loader', 7 options: { 8 arr: [ 9 {search: '$BaseUrl', replace: 'https://test.baiduu.com', attr: 'g'}, 10 {search: '$Title', replace: '百度一下,你就知道', attr: 'g'} 11 ] 12 } 13 } 14 ... 15 ] 16}
test.js :
1 var title = '$Title'; 2 function showTitle () { 3 document.title = title; 4 }
通过以上 webpack
配置打包后生成 test.js :
1var title = '百度一下,你就知道核心价值观'; 2function showTitle() { 3 document.title = title; 4}
在上例中,$Title
的作用仅仅是提供一个查找字符串的 锚点 ,并没有实际意义。
1 . 将 a.js 中的 BaseUrl 只替换第一个为 https://www.baidu.com/api/ ; Title 全部替换为 " 百度开放接口 " 。
2 . 将 b.js 中的 Location 全部替换为 " BeiJing " 。
1module: { 2 loaders: [ 3 ... 4 { 5 test: /a\.js$/, 6 loader: 'webpack-replace-loader', 7 options: { 8 arr: [ 9 {search: 'BaseUrl', replace: 'https://www.baidu.com/api/'}, 10 {search: 'Title', replace: '百度开放接口', attr: 'g'} 11 ] 12 } 13 }, 14 { 15 test: /b\.js$/, 16 loader: 'webpack-replace-loader', 17 options: { 18 search: 'Location', 19 replace: 'https://www.baidu.com/api/', 20 attr: 'g' 21 } 22 } 23 ... 24 ] 25}
只要你的替换锚点不相同,你也可以合并写:
1module: { 2 loaders: [ 3 ... 4 { 5 test: /(a\.js|b.js|c\.js)$/, 6 loader: 'webpack-replace-loader', 7 options: { 8 arr: [ 9 {search: 'BaseUrl', replace: 'https://www.baidu.com/api/'}, 10 {search: 'Title', replace: '百度开放接口', attr: 'g'} 11 {search: 'Location', replace: 'BeiJing', attr: 'g'} 12 ] 13 } 14 } 15 ... 16 ] 17}
包括 .css 文件,.less 文件等 : 将color: red;
修改为 color: #0cff00;
1.test { 2 color: red; 3}
配置:
1options: { 2 search: 'color: red;', 3 replace: 'color: #0cff00;', 4 attr: 'g' 5}
替换后:
1.test { 2 color: #0cff00; 3}
将 a.hml 文件 的 div
标签换为 span
标签。将 class text
换为 box
:
1<span>$DOM</span>
配置如下:
1options: { 2 arr: [ 3 {search: 'span', replace: 'div', attr: 'g'}, 4 {search: '$DOM', replace: ` 5 <span class="box"> 6 <span class="text">百度一下,你就知道</span> 7 </span> 8 `} 9 ] 10}
替换后:
1<div> 2 <span class="box"> 3 <span class="text">百度一下,你就知道</span> 4 </span> 5</div>
在 test 目录下进行执行:
1 npm install
1 npm run test
用浏览器打开:test/dist/index.html。
1.2版本后,已做全字符转义,包含但不限于下列情况均可替换。
1search: '<a class__'; 2search: '.a /bcc .g'; 3search: '[.a]'; 4search: '--{a-x}'; 5search: '({[list]})'; 6search: '/$/abb^'; 7search: '<c><d></>'; 8search: '?+^$@><-';
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
Found 0/23 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
23 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More