🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

webpack-replace-loader

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webpack-replace-loader - npm Package Compare versions

Comparing version
1.3.0
 to
5.0.1
+8
-8
index.js
var loaderUtils = require('loader-utils');

@@ -39,5 +38,5 @@ // Characters needed to escape

module.exports = function (source, map) {
this.cacheable();
var options = loaderUtils.getOptions(this);
function loader (content) {
const options = this.query;
let configArray = [];

@@ -74,6 +73,7 @@ if (options.hasOwnProperty('arr')) {

source = replaceFunc(configArray, source);
content = replaceFunc(configArray, content);
this.callback(null, source, map);
return source;
};
return content
}
module.exports = loader
+4
-5
package.json
{
"name": "webpack-replace-loader",
"version": "1.3.0",
"version": "5.0.1",
"author": "beautifulBoys <1298947916.com>",

@@ -14,8 +14,7 @@ "description": "A loader for replacing strings && 一个 Webpack 打包时用来替换字符串的 Loader ",

"scripts": {},
"main": "index.js",
"main": "./index.js",
"dependencies": {
"loader-utils": "^1.1.0"
},
"devDependencies": {
"webpack": "1 || 2 || 3"
"peerDependencies": {
"webpack": "^5.0.0"
},

@@ -22,0 +21,0 @@ "repository": {

+8
-4
README.md

@@ -13,2 +13,6 @@ # webpack-replace-loader

## 与 webpack 版本关系
webpack v5，请安装Tag: v5.0.0+
webpack v4，请安装Tag: v4.0.0+ （正在编写中）
webpack v3，请安装Tag: v1.0.0+

@@ -33,3 +37,3 @@ ## 安装

{search: '$BaseUrl', replace: 'https://test.baiduu.com', attr: 'g'},
{search: '$Title', replace: '社会主义核心价值观', attr: 'g'}
{search: '$Title', replace: '百度一下，你就知道', attr: 'g'}
]

@@ -54,3 +58,3 @@ }

```js
var title = '社会主义核心价值观';
var title = '百度一下，你就知道核心价值观';
function showTitle() {

@@ -148,3 +152,3 @@ document.title = title;

<span class="box">
<span class="text">社会主义</span>
<span class="text">百度一下，你就知道</span>
</span>

@@ -160,3 +164,3 @@ `}

<span class="box">
<span class="text">社会主义</span>
<span class="text">百度一下，你就知道</span>
</span>

@@ -163,0 +167,0 @@ </div>

-184
docs/README.md
# webpack-replace-loader
> A Webpack loader for replacing strings 。
[中文文档](https://github.com/beautifulBoys/webpack-replace-loader)　　 [English document](https://github.com/beautifulBoys/webpack-replace-loader/tree/master/docs)
## Examples of use scenarios
1 . When the webpack project is packaged, it replaces the request URL of the development environment to the URL of the production environment.
2 . Replace All color from `#00ff00` to `#ff0700` in HTML page.
3 . In large projects, different contents are written in the relevant files according to the packing strategy.
## Install
Install `webpack-replace-loader` as a dependency to a project:
```shell
npm install webpack-replace-loader --save-dev
```
## Configuration
Configuring webpack packaging policy:
```js
module: {
loaders: [
...
{
test: /test\.js$/,
loader: 'webpack-replace-loader',
options: {
arr: [
{search: '$BaseUrl', replace: 'https://test.googles.com', attr: 'g'},
{search: '$Title', replace: 'The core values of Chinese socialism', attr: 'g'}
]
}
}
...
]
}
```
## Examples
test.js :
```js
var title = '$Title';
function showTitle () {
document.title = title;
}
```
After this `webpack` configuration package, generate test.js:
```js
var title = 'The core values of Chinese socialism';
function showTitle() {
document.title = title;
}
```
In this case, `$Title` is simply to provide a search string anchor, and no practical significance.
## Other configuration methods of Webpack
1. replace the first "BaseUrl" with "https://www.googles.com/api/" in a.js ; "Title" instead of "google open API".
2. replace all the "Location" in B.js with "BeiJing"".
```js
module: {
loaders: [
...
{
test: /a\.js$/,
loader: 'webpack-replace-loader',
options: {
arr: [
{search: 'BaseUrl', replace: 'https://www.googles.com/api/'},
{search: 'Title', replace: 'google open API', attr: 'g'}
]
}
},
{
test: /b\.js$/,
loader: 'webpack-replace-loader',
options: {
search: 'Location',
replace: 'BeiJing',
attr: 'g'
}
}
...
]
}
```
As long as your replacement anchor is not the same, you can also merge:
```js
module: {
loaders: [
...
{
test: /(a\.js|b.js|c\.js)$/,
loader: 'webpack-replace-loader',
options: {
arr: [
{search: 'BaseUrl', replace: 'https://www.googles.com/api/'},
{search: 'Title', replace: 'google open API', attr: 'g'}
{search: 'Location', replace: 'BeiJing', attr: 'g'}
]
}
}
...
]
}
```
Including .css files, .less files. replace `color: red;` with `color: #0cff00; `.
```css
.test {
color: red;
}
```
config：
```js
options: {
search: 'color: red;',
replace: 'color: #0cff00;',
attr: 'g'
}
```
replaced：
```css
.test {
color: #0cff00;
}
```
Change the `div` tag of the a.hml file to the `span` tag. Change class `text` to `box`:
```html
<span>$DOM</span>
```
config：
```js
options: {
arr: [
{search: 'span', replace: 'div', attr: 'g'},
{search: '$DOM', replace: `
<span class="box">
<span class="text">The core values of Chinese socialism</span>
</span>
`}
]
}
```
replaced：
```html
<div>
<span class="box">
<span class="text">The core values of Chinese socialism</span>
</span>
</div>
```
## 测试
Running in the test folder:
```shell
npm install
```
```shell
npm run test
```
Open with browser: test/dist/index.html.
## Last
After 1.2 version, all character escape has been included, but not limited to the following circumstances can be replaced.
```js
search: '<a class__';
search: '.a /bcc .g';
search: '[.a]';
search: '--{a-x}';
search: '({[list]})';
search: '/$/abb^';
search: '<c><d></>';
search: '?+^$@><-';
```
<img src="https://raw.githubusercontent.com/beautifulBoys/webpack-replace-loader/master/test/test.png"> 
-17
test/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>webpack-replace-loader test</title>
</head>
<body>
< 测试 CSS >
<div class="color">测试css样式修改(显示为红色则失败，绿色则成功)</div>
<div class="color">Testing CSS style changes (red is failing, green is successful)</div>
<br/><br/>
< 测试 HTML >
<span>$DOM</span>
</body>
</html> 
-15
test/index.js
import './index.less';
function ajax () {
console.log('<a class__');
console.log('.a /bcc .g');
console.log('[.a]');
console.log('--{a-x}');
console.log('({[list]})');
console.log('/$/abb^');
console.log('<c><d></>');
console.log('?+^$@><-');
console.log(''#%"-');
}
ajax(); 
-4
test/index.less
@charset "UTF-8";
.color {
color: red;
} 
-32
test/package.json
{
"name": "webpack-replace-loader-test",
"version": "1.0.0",
"description": "test",
"main": "src/index.js",
"scripts": {
"test": "webpack --config webpack.config.js",
"webpack": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-latest": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-loader": "^2.0.6",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.4.1",
"webpack-dev-server": "^1.16.5",
"webpack-replace-loader": "^1.2.5"
}
}
test/test.png

Sorry, the diff of this file is not supported yet

-97
test/webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const config = {
entry: {
index: './index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.(html)$/,
loader: 'html-loader'
},
{
test: /index\.js$/,
loader: 'webpack-replace-loader',
options: {
arr: [
{search: '<a class__', replace: '替换成功1'},
{search: '.a /bcc .g', replace: '替换成功2'},
{search: '[.a]', replace: '替换成功3'},
{search: '--{a-x}', replace: '替换成功4'},
{search: '({[list]})', replace: '替换成功5'},
{search: '/$/abb^', replace: '替换成功6'},
{search: '<c><d></>', replace: '替换成功7'},
{search: '?+^$@><-', replace: '替换成功8'},
{search: '\'#%"-', replace: '替换成功9'}
]
}
},
{
test: /index\.less$/,
loader: 'webpack-replace-loader',
options: {
arr: [
{search: 'color: red', replace: 'color: green'}
]
}
},
{
test: /\.html$/,
loader: 'webpack-replace-loader',
options: {
arr: [
{search: 'span', replace: 'div'},
{
search: '$DOM',
replace: `
<span class="box">
<span class="text">看到我就代表替换 HTML 成功 ( successful ) </span>
</span>
`
}
]
}
},
{
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['latest']
}
},
{
test: /\.(png|jpg|svg|gif)$/i,
loader: 'url-loader',
query: {
limit: 200,
name: 'images/[hash:5].[ext]'
}
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
]
};
module.exports = config;