웹 팩: html 템플릿에서 이미지 로드
웹 팩을 사용하여 각도 프로젝트를 설정하려고 하는데 html 템플릿 내에서 이미지를 참조하고 빌드에 포함시키는 방법을 알 수 없습니다.
프로젝트 트리는 다음과 같습니다.
package.json
app/
- images/
- foo.png
- scripts/
- styles/
- templates/
사용하려고 합니다.html-loader와 함께url-loader그리고.file-loader하지만 그런 일은 일어나지 않아요
템플릿의 예를 다음에 나타냅니다.app/templates/foo.html
<img src="../images/foo.png" />
문제 1: 이미지 참조가 가능app/현시점에서는 경로는 템플릿파일에 상대적인 것이어야 합니다.이것은 매우 빠르게 악화됩니다(../../../images/foo.png).
문제 2: 위와 같이 상대 경로를 지정해도 프로젝트는 정상적으로 구축되지만 실제로는 아무 일도 일어나지 않습니다.패스는 그대로 유지되며 이미지는 표시되지 않습니다.dist/.
웹 팩 설정은 다음과 같습니다.
var path = require('path');
var webpack = require('webpack');
var ngminPlugin = require('ngmin-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
module.exports = function(config, env) {
var appRoot = path.join(__dirname, 'app/')
if(!env) env = 'development';
var webpackConfig = {
cache: true,
debug: true,
contentBase: appRoot,
entry: {
app: path.join(appRoot, '/scripts/app.coffee')
},
output: {
path: path.join(__dirname, 'dist/),
publicPath: '/',
libraryTarget: 'var',
filename: 'scripts/[name].[hash].js',
chunkFilename: '[name].[chunkhash].js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader?outputStyle=expanded&includePaths[]=./node_modules/foundation/scss/')
},
{
test: /\.coffee$/,
loader: 'coffee-loader'
},
{
loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app')) + '/!html'
},
{
test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png&name=[path][name].[hash].[ext]"
},
{
test: /\.jpg$/, loader: "file-loader?name=[path][name].[hash].[ext]"
},
{
test: /\.(woff|woff2)(\?(.*))?$/,
loader: 'url?prefix=factorynts/&limit=5000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.eot(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.svg(\?(.*))?$/,
loader: 'file?prefix=fonts/'
},
{
test: /\.json$/,
loader: 'json'
}
]
},
resolve: {
extensions: [
'',
'.js',
'.coffee',
'.scss',
'.css'
],
root: [appRoot],
},
singleRun: true,
plugins: [
new webpack.ContextReplacementPlugin(/.*$/, /a^/),
new webpack.ProvidePlugin({
'_': 'lodash'
}),
new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}),
new HtmlWebpackPlugin({
template: appRoot + '/app.html',
filename: 'app.html',
inject: 'body',
chunks: ['app']
})
],
devtool: 'eval'
}
if(env === 'production') {
webpackConfig.plugins = webpackConfig.plugins.concat(
new ngAnnotatePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.DefinePlugin({
'process-env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
);
webpackConfig.devtool = false;
webpackConfig.debug = false;
}
return webpackConfig;
}
Webpack 2에서 HTML 템플릿을 사용하는 경우 파일 로더를 사용하는 것 외에 HTML에서 변경해야 합니다.
<img src="../images/foo.png" />
여기에
<img src=<%=require("../images/foo.png")%> />
- 예, 다른 경로에서 이미지를 로드하려면 이 작업을 수행해야 합니다.
- 저도 비슷한 문제가 있어서 이 문제를 해결했습니다.
file로더:
.
loaders: [{
// JS LOADER
test: /\.js$/,
loader: 'babel-loader?optional[]=runtime',
exclude: /node_modules/
}, {
// ASSET LOADER
test: /\.(woff|woff2|ttf|eot)$/,
loader: 'file-loader'
},
{
//IMAGE LOADER
test: /\.(jpe?g|png|gif|svg)$/i,
loader:'file-loader'
},
{
// HTML LOADER
test: /\.html$/,
loader: 'html-loader'
},
{
//SCSS LOADER
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader?indentedSyntax"]
}
]
행운을 빌어요
Webpack 5 의 경우는, 다음과 같이 기술할 필요가 있습니다.
module: {
rules: [
// other stuff above.....
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
}
]
}
Webpack 4를 사용하여 다음 방법으로 업데이트하여 이 문제를 해결할 수 있었습니다.html-loader를 지정하다root내 파일들을 위해.@syko의 원래 구조를 보면,webpack.config.js...
module: {
rules: [
// other stuff above.....
{
test: /\.html$/,
use: [
// ...The other file-loader and extract-loader go here.
{
loader: 'html-loader'
options: {
// THIS will resolve relative URLs to reference from the app/ directory
root: path.resolve(__dirname, 'app')
}
}
]
}
]
}
이것은,html-loader에서의 모든 절대 URL을 해석하다/app폴더입니다.그래서 저희 회사에서는app/templates/foo.html, 그 후 다음을 사용할 수 있습니다.
<img src="/images/foo.png" />
그럼 이렇게 하면html-loader상기의 것을 로 보다path.resolve(__dirname, 'app', 'images', 'foo.png')그럼, 만약extract-loader및/또는file-loader, 모든 경로가 정확해야 합니다.
한참을 고민한 끝에 겨우 이 해결 방법을 찾아냈다.가장 큰 혼란은 로더 스택의 어느 부분에서/images/foo.png해석됩니다.이 경우, 이 경우, 이 값은html-loader플러그 인.그 이후의 모든 것은 이미지 파일을 게시하는 방법에 관한 것입니다.
도움이 됐으면 좋겠다.
파일 로더를 사용하여 이미지를 추출할 수 있습니다.그런 다음 html-loader를 사용하여 쿼리 매개 변수를 통해 이 로더가 처리해야 하는 태그-속성 조합을 지정할 수 있습니다.attrs.
다음의 설정으로 동작하게 할 수 있습니다.
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'link:href']
}
}
}
또는 다음과 같은 각진 형태입니다.
attrs: [':ng-src', ':ng-href']
언급URL : https://stackoverflow.com/questions/32753650/webpack-loading-images-from-html-templates
'programing' 카테고리의 다른 글
| App() vs 클래스 App은 App.js 파일에서 컴포넌트를 확장합니다. (0) | 2023.04.04 |
|---|---|
| gitub 저장소를 기반으로 로컬 저장소를 생성하여 업데이트 유지 (0) | 2023.04.04 |
| Oracle의 to_char에서 형식이 아닌 문자를 이스케이프하는 가장 좋은 방법은 무엇입니까? (0) | 2023.04.04 |
| ImperativeHandle, useLayoutEffect 및 useDebugValue를 사용하는 경우 (0) | 2023.04.04 |
| 오라클 sid 및 데이터베이스 이름 확인 중 (0) | 2023.04.04 |