webpack html-loader： <img> 标签不触发 url-loader
webpack html-loader： <img> tag not triggering url-loader
使用html-loader时，index.html中的<img>标签没有触发url-loader。这是我的 webpack 配置 & html:
webpack 配置
// webpack config
module.exports = {
entry: {
"index": path.join(__dirname, "./src/js/app.js"),
"guide_index": path.join(__dirname, './src/js/guide_app.js')
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: '[name].[hash].js'
},
// loaders
module: {
rules: [
{
test: /\.(gif|jpe?g|png|svg|mp3|ttf)$/i,
loader: "url-loader",
include: [
"/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/image",
path.resolve(__dirname, "/src/image"),
path.resolve(__dirname, "/../Travel/Resource/assets/image"),
path.resolve(__dirname, "/../Travel/Resource/assets")
],
query: {
limit: 5000,
name: '[name].[hash:16].[ext]'
//name: "./assets/[name].[hash:16].[ext]"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
// exclude: /node_modules/,
query: { cacheDirectory: true }
},
{
test: /\.html$/,
use: [ {
loader: 'html-loader',
options: {
minimize: false,
removeComments: false,
removeCommentsFromCDATA: false,
removeCDATASectionsFromCDATA: false,
collapseWhitespace: false,
conservativeCollapse: false,
// removeAttributeQuotes: false,
// useShortDoctype: false,
// keepClosingSlash: false,
minifyJS: false,
minifyCSS: false,
// removeScriptTypeAttributes: false,
// removeStyleTypeAttributes: false
}
}]
}
]
},
// Plugins
plugins: [
new HtmlWebpackPlugin({
filename: 'guide_index.html',
template: path.join(__dirname, './src/html/guide_index.html'),
inject: true,
chunks: ["guide_index"],
minify: false,
chunksSortMode: 'dependency'
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, './src/html/index.html'),
inject: true,
chunks: ["index"],
minify: false,
chunksSortMode: 'dependency'
}),
new webpack.LoaderOptionsPlugin({
debug: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': "'development'"
})
],
resolve: {
extensions: [ '.web.js', '.js', '.jsx' ]
}
}
index.html:
<div class="button" ng-click="$backHistory()" ng-if="navbarType == 'backHistory'">
<img src="back.png">
</div>
错误日志：
Module not found: Error: Can't resolve './back.png' in '/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/html':
Error: Can't resolve './back.png' in '/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/html'
- compiler.js:76
[Travel]/[.2.28.0@html-webpack-plugin]/lib/compiler.js:76:16
- Compiler.js:291 Compiler.<anonymous>
[Travel]/[.2.3.2@webpack]/lib/Compiler.js:291:10
- Compiler.js:494
[Travel]/[.2.3.2@webpack]/lib/Compiler.js:494:13
- Tapable.js:138 next
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:138:11
- CachePlugin.js:62 Compiler.<anonymous>
[Travel]/[.2.3.2@webpack]/lib/CachePlugin.js:62:5
- Tapable.js:142 Compiler.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:142:13
- Compiler.js:491
[Travel]/[.2.3.2@webpack]/lib/Compiler.js:491:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
- Compilation.js:645 self.applyPluginsAsync.err
[Travel]/[.2.3.2@webpack]/lib/Compilation.js:645:19
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
- Compilation.js:636 self.applyPluginsAsync.err
[Travel]/[.2.3.2@webpack]/lib/Compilation.js:636:11
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
- Compilation.js:631 self.applyPluginsAsync.err
[Travel]/[.2.3.2@webpack]/lib/Compilation.js:631:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
- Compilation.js:627 sealPart2
[Travel]/[.2.3.2@webpack]/lib/Compilation.js:627:9
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
......
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 7.51 kB 0
ERROR in ./~/.2.28.0@html-webpack-plugin/lib/loader.js!./Travel/Resource/assets/html/index.html
Module not found: Error: Can't resolve './back.png' in '/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/html'
@ ./~/.2.28.0@html-webpack-plugin/lib/loader.js!./Travel/Resource/assets/html/index.html 1:2182-2203 1:2367-2388
您应该将其添加到扩展列表中：
// extensions: [ '.web.js', '.js', '.jsx' ]
extensions: [ '.web.js', '.js', '.jsx', '.png' ]
它没有到达 url-loader 因为文件不存在。您的 HTML 文件在 Travel/Resource/assets/html/ 中，而在 HTML 文件中您有一个 <img> 标签和来源 back.png，所以它会在同一个目录中查找，因此它试图找到 Travel/Resource/assets/html/back.png 但从你的 webpack 配置来看，图像的路径是 Travel/Resource/assets/image/back.png。这意味着您必须将其导入为 ../image/back.png:
<div class="button" ng-click="$backHistory()" ng-if="navbarType == 'backHistory'">
<img src="../image/back.png">
</div>
它应该找到文件并正确应用 url-loader，但是您使用 url-loader 的规则不太正确。您包括 path.resolve(__dirname, "/src/image") 并且当 path.resolve 看到绝对路径时它会忽略其余部分。因此，您包含的路径是 /src/image 而不是 /path/to/project/src/image。您需要删除前导 /，您可以将 include 更改为：
include: [
path.resolve(__dirname, "src/image"),
path.resolve(__dirname, "../Travel/Resource/assets/image"),
path.resolve(__dirname, "../Travel/Resource/assets")
],
这样你就不需要你手动添加的绝对路径了，因为它现在被第二个 path.resolve.
覆盖了
谢谢大家，但我尝试了上述方法，但没有奏效。然后我突然意识到我只需要配置我的快速开发服务器：
app.use(express.static(...))
哈哈瞬间：）
使用html-loader时，index.html中的<img>标签没有触发url-loader。这是我的 webpack 配置 & html:
webpack 配置
// webpack config
module.exports = {
entry: {
"index": path.join(__dirname, "./src/js/app.js"),
"guide_index": path.join(__dirname, './src/js/guide_app.js')
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: '[name].[hash].js'
},
// loaders
module: {
rules: [
{
test: /\.(gif|jpe?g|png|svg|mp3|ttf)$/i,
loader: "url-loader",
include: [
"/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/image",
path.resolve(__dirname, "/src/image"),
path.resolve(__dirname, "/../Travel/Resource/assets/image"),
path.resolve(__dirname, "/../Travel/Resource/assets")
],
query: {
limit: 5000,
name: '[name].[hash:16].[ext]'
//name: "./assets/[name].[hash:16].[ext]"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
// exclude: /node_modules/,
query: { cacheDirectory: true }
},
{
test: /\.html$/,
use: [ {
loader: 'html-loader',
options: {
minimize: false,
removeComments: false,
removeCommentsFromCDATA: false,
removeCDATASectionsFromCDATA: false,
collapseWhitespace: false,
conservativeCollapse: false,
// removeAttributeQuotes: false,
// useShortDoctype: false,
// keepClosingSlash: false,
minifyJS: false,
minifyCSS: false,
// removeScriptTypeAttributes: false,
// removeStyleTypeAttributes: false
}
}]
}
]
},
// Plugins
plugins: [
new HtmlWebpackPlugin({
filename: 'guide_index.html',
template: path.join(__dirname, './src/html/guide_index.html'),
inject: true,
chunks: ["guide_index"],
minify: false,
chunksSortMode: 'dependency'
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, './src/html/index.html'),
inject: true,
chunks: ["index"],
minify: false,
chunksSortMode: 'dependency'
}),
new webpack.LoaderOptionsPlugin({
debug: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': "'development'"
})
],
resolve: {
extensions: [ '.web.js', '.js', '.jsx' ]
}
}
index.html:
<div class="button" ng-click="$backHistory()" ng-if="navbarType == 'backHistory'">
<img src="back.png">
</div>
错误日志：
Module not found: Error: Can't resolve './back.png' in '/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/html':
Error: Can't resolve './back.png' in '/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/html'
- compiler.js:76
[Travel]/[.2.28.0@html-webpack-plugin]/lib/compiler.js:76:16
- Compiler.js:291 Compiler.<anonymous>
[Travel]/[.2.3.2@webpack]/lib/Compiler.js:291:10
- Compiler.js:494
[Travel]/[.2.3.2@webpack]/lib/Compiler.js:494:13
- Tapable.js:138 next
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:138:11
- CachePlugin.js:62 Compiler.<anonymous>
[Travel]/[.2.3.2@webpack]/lib/CachePlugin.js:62:5
- Tapable.js:142 Compiler.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:142:13
- Compiler.js:491
[Travel]/[.2.3.2@webpack]/lib/Compiler.js:491:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
- Compilation.js:645 self.applyPluginsAsync.err
[Travel]/[.2.3.2@webpack]/lib/Compilation.js:645:19
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
- Compilation.js:636 self.applyPluginsAsync.err
[Travel]/[.2.3.2@webpack]/lib/Compilation.js:636:11
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
- Compilation.js:631 self.applyPluginsAsync.err
[Travel]/[.2.3.2@webpack]/lib/Compilation.js:631:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
- Compilation.js:627 sealPart2
[Travel]/[.2.3.2@webpack]/lib/Compilation.js:627:9
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[.0.2.6@tapable]/lib/Tapable.js:131:46
......
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 7.51 kB 0
ERROR in ./~/.2.28.0@html-webpack-plugin/lib/loader.js!./Travel/Resource/assets/html/index.html
Module not found: Error: Can't resolve './back.png' in '/Users/chrishu/Projects/Wind/guideios/Travel/Travel/Resource/assets/html'
@ ./~/.2.28.0@html-webpack-plugin/lib/loader.js!./Travel/Resource/assets/html/index.html 1:2182-2203 1:2367-2388
您应该将其添加到扩展列表中：
// extensions: [ '.web.js', '.js', '.jsx' ]
extensions: [ '.web.js', '.js', '.jsx', '.png' ]
它没有到达 url-loader 因为文件不存在。您的 HTML 文件在 Travel/Resource/assets/html/ 中，而在 HTML 文件中您有一个 <img> 标签和来源 back.png，所以它会在同一个目录中查找，因此它试图找到 Travel/Resource/assets/html/back.png 但从你的 webpack 配置来看，图像的路径是 Travel/Resource/assets/image/back.png。这意味着您必须将其导入为 ../image/back.png:
<div class="button" ng-click="$backHistory()" ng-if="navbarType == 'backHistory'">
<img src="../image/back.png">
</div>
它应该找到文件并正确应用 url-loader，但是您使用 url-loader 的规则不太正确。您包括 path.resolve(__dirname, "/src/image") 并且当 path.resolve 看到绝对路径时它会忽略其余部分。因此，您包含的路径是 /src/image 而不是 /path/to/project/src/image。您需要删除前导 /，您可以将 include 更改为：
include: [
path.resolve(__dirname, "src/image"),
path.resolve(__dirname, "../Travel/Resource/assets/image"),
path.resolve(__dirname, "../Travel/Resource/assets")
],
这样你就不需要你手动添加的绝对路径了，因为它现在被第二个 path.resolve.
谢谢大家，但我尝试了上述方法，但没有奏效。然后我突然意识到我只需要配置我的快速开发服务器：
app.use(express.static(...))
哈哈瞬间：）