我正在使用Webpack在我的
HTML,CSS和JS上加载图像.
我的配置是：
{
var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry: [
'angular','./src/lib.js','./src/app.js',],output: {
path: path.join(__dirname,'dist'),filename: '[name].js',},module: {
rules: [{
test: /\.(jpe?g|png|gif|svg)$/i,loader: ['file-loader?name=[name].[ext]&outputhPath=images/&publicPath=images/'],{
test: /\.css|scss$/,use: ExtractTextPlugin.extract({
fallback: "style-loader",use: ['css-loader']
})
},{
test: /\.html$/,exclude: [
path.join(__dirname,'/src/index.html')
],use: [
{ loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname,'./src'))},{ loader: 'html-loader'},]
}],plugins: [
new HtmlWebpackPlugin({
title: 'Project Demo,minify: {
collapseWhitespace: true,cache: true,hash: true,inject: true,filename: './index.html',template: 'src/index.html'
}),new ExtractTextPlugin({
filename: "app.css",disable: false,allChunks: true
})
],devServer: {
port: 9000
},};
module.exports = config;
}
我的项目文件夹结构：
- dist
- images [folder]
- index.html
- app.css
- main.js
- node_modules
- src
- images
- javascripts/pages/HTML Files
- stylesheets
- app.js (BootStrapping angular)
- lib.js
- index.html
- webpack.config.js
- package.js
我只想引用来自HTML,CSS和JS的图像(至少在JS中的图像位置),但目前我的所有图像路径都是相对于图像文件夹到模板文件.
在这种情况下,为每个HTML和JS文件配置路径就像地狱一样.
所以我的问题是：我怎样才能拥有通用路径,以便在HTML,JS或CSS中使用
只需在任何文件中引用图像名称,通用路径就会在图像文件夹中找到它.
非常感谢帮助!!!
解决方法
好的 – 我已经弄清楚如何设置常见的图像路径,以便可以从项目中的任何HTML,JS或CSS加载图像,只需要在每个实例中提供相同的公共路径.
需要做出的改变是：
>在Webpack.config.js文件中,我们需要添加新的插件
new CopyWebpackPlugin([{
from: './src/images',to: 'images'
}]),
>仅在Webpack.config.js中 – 我们需要在输出部分中设置publicPath：
output: {
path: path.join(__dirname,'mcaid'),filename: 'bundle.js',publicPath: '/',<----- this is been added
},
>在HTML,JS或CSS文件中,您可以参考如下图像：
<img src="/images/some_Image_file.png"/>
/ src中的图像是 – ‘/’是publicPath,’images’是来自’dev’的src文件夹中的图像,’dist’中的’images’是’prod’构建的图像.
