2
html 로더를 사용할 때, index.html의 <img> 태그가 url-loader를 트리거하지 않았습니다.webpack html 로더 : <img> 태그가 URL 로더를 트리거하지 않음
웹팩 설정
// 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>
오류 로그 : 여기 내 웹팩 CONFIGS & HTML의
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