Делаю сборку webpack 5 со следующей структурой:
-dist
-assets
-img
index.html
-src
-assets
-img
-js
-styles
index.html
webpack.common
webpack.dev
webpack.prod
В index.html прописана картинка с путем assets/img/1.png, но она не отображается из-за неверного пути. Если картинке прописать путь src/assets/img/1.png, тогда она появится, но при продакшн сборке не будет отображаться эта картинка из-за неверного пути к ней (в папке dist не предусмотрена папка src, там сразу будет папка assets, а в ней уже папка img с картинкой). Т.е. получается index.html из папки src берет пути к файлам, как будто сам он находится в корне проекта. Как это исправить, чтобы не выносить папку assets из src и не создавать папку src в dist?
webpack.common:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const dirNode = 'node_modules';
const dirJs = path.join(__dirname, 'src/js');
const dirStyles = path.join(__dirname, 'src/styles');
const dirAssets = path.join(__dirname, 'src/assets');
/**
* Webpack Configuration
*/
module.exports = env => {
// Is the current build a development build
const IS_DEV = !!env.dev;
return {
entry: {
main: path.join(dirJs, 'index')
},
resolve: {
extensions: ['.js'],
modules: [
dirNode,
dirJs,
dirStyles,
dirAssets
]
},
plugins: [
new webpack.DefinePlugin({ IS_DEV }),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
module: {
rules: [
// BABEL
{
test: /\.m?js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
compact: true
}
}
},
// STYLES
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: IS_DEV
}
},
]
},
// CSS / SASS
{
test: /\.scss/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: IS_DEV
}
},
{
loader: 'sass-loader',
options: {
sourceMap: IS_DEV,
sassOptions: {
includePaths: [dirAssets]
}
}
}
]
},
// IMAGES
{
test: /\.(png|jpe?g|gif)$/i,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
}
]
},
optimization: {
runtimeChunk: 'single'
}
};
};
webpack.dev:
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = env => {
return merge(common(env), {
mode: 'development',
// Use eval-cheap-source-map for accurate line numbers, eval has best build performance
devtool: 'eval',
output: {
pathinfo: true,
publicPath: '/',
filename: '[name].bundle.js'
},
devServer: {
open: true,
port: 3000,
}
});
};
webpack.prod:
const path = require('path');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const common = require('./webpack.common');
module.exports = env => {
return merge(common(env), {
mode: 'production',
// IMPORTANT: Configure server to disallow access to source maps from public!
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
plugins: [
new CleanWebpackPlugin(),
new CopyPlugin({
patterns: [
{ from: path.join(__dirname, 'src/assets'), to: 'assets' }
]
})
]
});
};
Простой
