В настоящее время, когда я выполняю yarn dev, у меня есть изображения в моем комплекте, а также в папке images в каталоге dist.У меня также есть такое же изображение в моем комплекте и в images в dist, это зависит от того, как загружаются изображения (<img src="*">, <img ng-src="*">).
Сначала я скопировал изображения с copy-webpack-plugin, но некоторыеизображения были в моем комплекте и / или в images (из-за копирования) в dist.Я пытался с помощью file-loader и url-loader загрузить эти изображения, но у меня всегда есть случаи, когда изображения загружаются неправильно.
Пожалуйста, будьте осторожны с моим деревом файлов.
app /index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div style="float: left">
<label style="display: block">Sun in src</label>
<img src="../images/sun.svg" width="200px">
</div>
<div style="float: left; margin-left: 100px">
<label style="display: block">Sun in ng-src</label>
<img ng-src="{{imgSun}}" width="200px">
</div>
<div style="float: left; margin-left: 100px">
<label style="display: block">Cloud in ng-src</label>
<img ng-src="{{imgCloud}}" width="200px">
</div>
</div>
</body>
</html>
app / app.js
angular.module("myApp", []).controller('Ctrl', function ($scope) {
$scope.imgSun = 'images/sun.svg';
$scope.imgCloud = 'images/cloud.svg';
});
webpack.config.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const distDirectory = 'webpack-dist';
module.exports = {
mode: 'development',
bail: true,
entry: {'myApp': ['./app/index.html', './app/app.js']},
module: {
rules: [
{test: /\.svg$/, use: 'file-loader'},
/*{
test: /\.svg$/,
use: [{loader: 'file-loader', options: {name: '[path][name].[ext]?[hash]'}}],
include: path.resolve('images'),
},*/
//{test: /\.svg$/, use: 'url-loader', include: path.resolve('images')},
{test: /\.html$/, use: 'html-loader'},
]
},
watch: true,
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({template: path.resolve('app/index.html')}),
new BrowserSyncPlugin({host: 'localhost', server: {baseDir: [path.resolve(distDirectory)]}})
],
output: {filename: '[name].bundle.js', path: path.resolve(distDirectory)}
};
package.json
{
"dependencies": {
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.2.2",
"clean-webpack-plugin": "^2.0.1",
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
},
"scripts": {
"dev": "node_modules/.bin/webpack --open"
}
}
Я хотел бы, чтобы все изображения были в моем комплекте.Я не хочу дублировать данные (связка и папка images) в моем дистрибутиве.Поэтому я смогу добавить [hash] в свой комплект и у меня больше не будет проблем с кешем браузера.