Сейчас для файлов в папке src
(js, css и html) требуются изображения из папки public
, которая отлично работает с webpack-dev-server, однако, когда я запускаю build
,пути не меняются. Я использую webpack-copy-plugin для перемещения файлов из папки public
в новую папку с именем assets
в dist
. Я хочу изменить пути к этой папке assets
.
Например, файл index.html
в папке src
имеет следующую ссылку:
<link
rel="shortcut icon"
type="image/png"
href="../public/browser-favicon.png"
/>
И файл index.html
в папке dist
должен выглядеть следующим образом:
<link
rel="shortcut icon"
type="image/png"
href="./assets/browser-favicon.png"
/>
Это структура моего проекта:
>dist
>assets
// all images in here...
index.html
index_bundle.js
>public
// all images in here...
>src
>components
>styles
index.html
index.js
Это мой файл webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index_bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader?url=false",
"sass-loader"
]
},
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader?name=assets/[name].[ext]"
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
}),
new CopyPlugin([{ from: "public", to: "assets" }])
]
};
И мои скрипты npm:
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
}