🚀 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.2.5
 to
1.2.8
+172
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: 'replace-webpack-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: 'replace-webpack-loader',
options: {
arr: [
{search: 'BaseUrl', replace: 'https://www.googles.com/api/'},
{search: 'Title', replace: 'google open API', attr: 'g'}
]
}
},
{
test: /b\.js$/,
loader: 'replace-webpack-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: 'replace-webpack-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>
```
## 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: '?+^$@><-';
``` 
+21
LICENSE
The MIT License (MIT)
Copyright (c) 2017-present, jason_li <beautifulBoys>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. 
+79
src/dist/index.js
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
function ajax () {
console.log('社会主义核心价值观ab');
console.log('sdfsdf');
console.log('社会主义核心价值观ab');
}
ajax();
/***/ })
/******/ ]);
+6
src/index.js
function ajax () {
console.log('$()');
console.log('sdfsdf');
console.log('$()');
}
ajax(); 
+35
src/package.json
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"dev": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1",
"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"
},
"dependencies": {
"webpack-replace-loader": "^1.2.5"
}
}
+55
src/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: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['latest']
}
},
{
test: /\.js$/,
loader: 'webpack-replace-loader',
options: {
search: '$()',
replace: '社会主义核心价值观ab',
attr: 'g'
}
},
{
test: /\.(png|jpg|svg|gif)$/i,
loader: 'url-loader',
query: {
limit: 200,
name: 'images/[hash:5].[ext]'
}
}
]
}
};
module.exports = config; 
+1
-1
index.js

@@ -62,3 +62,3 @@

} else {
if (options.hasOwnProperty('search') && options.hasOwnProperty('replace')) {
if (options.hasOwnProperty('search') && options.hasOwnProperty('replace')) { // 对象形式存在
configArray.push({

@@ -65,0 +65,0 @@ search: options.search,

+6
-12
package.json
{
"name": "webpack-replace-loader",
"version": "1.2.5",
"description": "A loader for replace string by webpack",
"main": "index.js",
"version": "1.2.8",
"author": "beautifulBoys <1298947916.com>",
"description": "A loader for replacing strings && 一个 Webpack 打包时用来替换字符串的 Loader ",
"keywords": [

@@ -13,6 +13,4 @@ "webpack",

],
"directories": {
"doc": "docs",
"example": "example"
},
"scripts": {},
"main": "index.js",
"dependencies": {

@@ -24,5 +22,2 @@ "loader-utils": "^1.1.0"

},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {

@@ -32,4 +27,3 @@ "type": "git",

},
"author": "beautifulBoys <1298947916.com>",
"license": "MIT"
"private": false
}
+6
-3
README.md
# webpack-replace-loader
> 一个 webpack 打包时用来替换字符串的 webpack-loader 。
[中文文档](https://github.com/beautifulBoys/webpack-replace-loader)　　 [English document](https://github.com/beautifulBoys/webpack-replace-loader/tree/master/docs)
## 使用场景举例
1 . 在使用 webpack 项目打包的时候，用来将开发环境的请求 URL 替换为 生产环境的 URL 。
2 . 全项目统一查找调整页面配色样式 `color` , 将 `#00ff00` 替换为 `#ff0700` 。
2 . 项目统一查找调整页面配色样式 `color` , 将 `#00ff00` 替换为 `#ff0700` 。

@@ -130,3 +132,3 @@ 3 . 大型项目中，依照打包策略在相关文件中写入不同内容。

将 a.hml 文件 的 `div` 标签换位 `span` 标签。将 class `text` 换位 `box` :
将 a.hml 文件 的 `div` 标签换为 `span` 标签。将 class `text` 换为 `box` :

@@ -140,3 +142,3 @@ ```html

arr: [
{search: 'span', replace: 'div'},
{search: 'span', replace: 'div', attr: 'g'},
{search: '$DOM', replace: `

@@ -159,2 +161,3 @@ <span class="box">

```
## 说明

@@ -161,0 +164,0 @@ 1.2版本后，已做全字符转义，包含但不限于下列情况均可替换。

-168
docs/chinese/README.md
# webpack-replace-loader
> 一个打包时用来替换字符串的 webpack-loader 。
## 使用场景举例
1 . 在使用 webpack 项目打包的时候，用来将开发环境的请求 URL 替换为 生产环境的 URL 。
2 . 全项目统一查找调整页面配色样式 `color` , 将 `#00ff00` 替换为 `#ff0700` 。
3 . 大型项目中，依照打包策略在相关文件中写入不同内容。
## 安装
将 `webpack-replace-loader` 作为依赖安装到项目:
```shell
npm install webpack-replace-loader --save-dev
```
## 配置使用
配置webpack打包策略：
```js
module: {
loaders: [
...
{
test: /test\.js$/,
loader: 'replace-webpack-loader',
options: {
arr: [
{search: '$BaseUrl', replace: 'https://test.baiduu.com', attr: 'g'},
{search: '$Title', replace: '社会主义核心价值观', attr: 'g'}
]
}
}
...
]
}
```
## 示例
test.js :
```js
var title = '$Title';
function showTitle () {
document.title = title;
}
```
通过以上 `webpack` 配置打包后生成 test.js ：
```js
var title = '社会主义核心价值观';
function showTitle() {
document.title = title;
}
```
在上例中，`$Title` 的作用仅仅是提供一个查找字符串的 锚点 ，并没有实际意义。
## Webpack 的其他配置方法
1 . 将 a.js 中的 BaseUrl 只替换第一个为 https://www.baidu.com/api/ ; Title 全部替换为 " 百度开放接口 " 。
2 . 将 b.js 中的 Location 全部替换为 " BeiJing " 。
```js
module: {
loaders: [
...
{
test: /a\.js$/,
loader: 'replace-webpack-loader',
options: {
arr: [
{search: 'BaseUrl', replace: 'https://www.baidu.com/api/'},
{search: 'Title', replace: '百度开放接口', attr: 'g'}
]
}
},
{
test: /b\.js$/,
loader: 'replace-webpack-loader',
options: {
search: 'Location',
replace: 'https://www.baidu.com/api/',
attr: 'g'
}
}
...
]
}
```
只要你的替换锚点不相同，你也可以合并写：
```js
module: {
loaders: [
...
{
test: /(a\.js|b.js|c\.js)$/,
loader: 'replace-webpack-loader',
options: {
arr: [
{search: 'BaseUrl', replace: 'https://www.baidu.com/api/'},
{search: 'Title', replace: '百度开放接口', attr: 'g'}
{search: 'Location', replace: 'BeiJing', attr: 'g'}
]
}
}
...
]
}
```
包括 .css 文件，.less 文件等 ： 将`color: red;` 修改为 `color: #0cff00;`
```css
.test {
color: red;
}
```
配置：
```js
options: {
search: 'color: red;',
replace: 'color: #0cff00;',
attr: 'g'
}
```
替换后：
```css
.test {
color: #0cff00;
}
```
将 a.hml 文件 的 `div` 标签换位 `span` 标签。将 class `text` 换位 `box` :
```html
<span>$DOM</span>
```
配置如下：
```js
options: {
arr: [
{search: 'span', replace: 'div'},
{search: '$DOM', replace: `
<span class="box">
<span class="text">社会主义</span>
</span>
`}
]
}
```
替换后：
```html
<div>
<span class="box">
<span class="text">社会主义</span>
</span>
</div>
```
## 说明
1.2版本后，已做全字符转义，包含但不限于下列情况均可替换。
```js
search: '<a class__';
search: '.a /bcc .g';
search: '[.a]';
search: '--{a-x}';
search: '({[list]})';
search: '/$/abb^';
search: '<c><d></>';
search: '?+^$@><-';
``` 
-1
docs/english/README.md
# 待补充