मैं वेबपैक का उपयोग करके एक कोणीय परियोजना स्थापित करने की कोशिश कर रहा हूं लेकिन मैं यह नहीं समझ सकता कि HTML टेम्पलेट्स के भीतर से छवियों का संदर्भ कैसे दिया जाए और उन्हें निर्माण में शामिल किया जाए।वेबपैक: एचटीएमएल टेम्पलेट्स से छवियों को लोड करना
package.json
app/
- images/
- foo.png
- scripts/
- styles/
- templates/
मैं url-loader और file-loader के साथ html-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;
}
कैसे आप समस्या को हल किया # 1? –