webpack html-loader:标记不触发url-loader
问题描述:
使用html-loader时,index.html中的<img>
标记没有触发url-loader。这里是我的WebPack CONFIGS & HTML:webpack html-loader:<img>标记不触发url-loader
的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]/[[email protected]]/lib/compiler.js:76:16
- Compiler.js:291 Compiler.<anonymous>
[Travel]/[[email protected]]/lib/Compiler.js:291:10
- Compiler.js:494
[Travel]/[[email protected]]/lib/Compiler.js:494:13
- Tapable.js:138 next
[Travel]/[[email protected]]/lib/Tapable.js:138:11
- CachePlugin.js:62 Compiler.<anonymous>
[Travel]/[[email protected]]/lib/CachePlugin.js:62:5
- Tapable.js:142 Compiler.applyPluginsAsyncSeries
[Travel]/[[email protected]]/lib/Tapable.js:142:13
- Compiler.js:491
[Travel]/[[email protected]]/lib/Compiler.js:491:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[[email protected]]/lib/Tapable.js:131:46
- Compilation.js:645 self.applyPluginsAsync.err
[Travel]/[[email protected]]/lib/Compilation.js:645:19
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[[email protected]]/lib/Tapable.js:131:46
- Compilation.js:636 self.applyPluginsAsync.err
[Travel]/[[email protected]]/lib/Compilation.js:636:11
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[[email protected]]/lib/Tapable.js:131:46
- Compilation.js:631 self.applyPluginsAsync.err
[Travel]/[[email protected]]/lib/Compilation.js:631:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[[email protected]]/lib/Tapable.js:131:46
- Compilation.js:627 sealPart2
[Travel]/[[email protected]]/lib/Compilation.js:627:9
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[Travel]/[[email protected]]/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 ./~/[email protected]/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'
@ ./~/[email protected]/lib/loader.js!./Travel/Resource/assets/html/index.html 1:2182-2203 1:2367-2388
答
感谢球员,但我尝试了上述方法,并没有奏效。这时我突然意识到我只需要配置我的快递开发服务器:
app.use(express.static(...))
哈哈:)时刻
答
你应该把它添加到扩展名列表:
// 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
覆盖。