在 npm webpack 中动态重命名 img "src"
Rename img "src" dynamically in npm webpack
我正在尝试创建一个将被其他模块使用的模块。但是,此模块包含 html 个文件。
模块 1 位置 c:/module_1
- 基地 HTML <img src="@@__dirname/img/icon.png">
在模块 1 中,他使用了他的 icon.png。
在模块 2 中,我希望它使用模块 2
的 icon.png
我试过这个:
plugins: [
new HtmlReplaceWebpackPlugin([
{
pattern: '@@__dirname',
replacement: __dirname
},
...
但是出现编译错误:
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve './@@_dirname/img/icon.png'
我注意到编译后可以替换src
<img src="img/icon.png">
new HtmlReplaceWebpackPlugin([
{
pattern: /src=\"([^\"]*)\"/g,
replacement: function (match, )
{
return 'src="' + __dirname + '/src/img/' + + '"';
}
}
]),
但我想替换之前,编译它时它会使用它正在重用的模块的图标。
是否可以在 npm 中动态修改 img src,即使它是一个将用作依赖项的模块?
ps。我对网络知之甚少,也不知道我是否正在尝试正确地做这个项目。只是想过以这种方式重用 html 代码。如果我做了一些荒谬的事情,请告诉我。
我用React and this tutorial Setting Up a React.js Environment Using Npm, Babel 6 and Webpack
解决了这个问题
我正在尝试创建一个将被其他模块使用的模块。但是,此模块包含 html 个文件。
模块 1 位置 c:/module_1
- 基地 HTML <img src="@@__dirname/img/icon.png">
在模块 1 中,他使用了他的 icon.png。
在模块 2 中,我希望它使用模块 2
的 icon.png我试过这个:
plugins: [
new HtmlReplaceWebpackPlugin([
{
pattern: '@@__dirname',
replacement: __dirname
},
...
但是出现编译错误:
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve './@@_dirname/img/icon.png'
我注意到编译后可以替换src
<img src="img/icon.png">
new HtmlReplaceWebpackPlugin([
{
pattern: /src=\"([^\"]*)\"/g,
replacement: function (match, )
{
return 'src="' + __dirname + '/src/img/' + + '"';
}
}
]),
但我想替换之前,编译它时它会使用它正在重用的模块的图标。
是否可以在 npm 中动态修改 img src,即使它是一个将用作依赖项的模块?
ps。我对网络知之甚少,也不知道我是否正在尝试正确地做这个项目。只是想过以这种方式重用 html 代码。如果我做了一些荒谬的事情,请告诉我。
我用React and this tutorial Setting Up a React.js Environment Using Npm, Babel 6 and Webpack
解决了这个问题