Answer the question
In order to leave comments, you need to log in
Webpack build to the root of the project?
Good evening everyone, can you tell me, at the moment the webpack builder is building to the dist folder, can I somehow build to the root of the project, the fact is that the development of landings is already inside the project, there is a path projectname/promo/landings/Here the folder with the landing page and the merged files should be located on this path. I poked around in the config, left just __dirname, but it refuses to build without any folder.
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
// Определение режима сборки
const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev
// Название файлов
const filename = ext => isDev ? `css/[name].${ext}` : `css/[name].min.[hash].${ext}`
// Функция оптимизации файлов для прода
const optimization = () => {
const config = {
splitChunks: {
chunks: 'all'
}
}
if (isProd) {
config.minimizer = [
new OptimizeCssAssetsWebpackPlugin,
new TerserWebpackPlugin
]
}
return config
}
// Подставляем загрузчик для стилей разный для дева и прода
const cssLoaders = extra => {
const loaders = [{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
reloadAll: true,
publicPath: '../'
},
},
'css-loader',
]
if (isProd) {
loaders.push({
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
})
}
if (extra) {
loaders.push(extra)
}
return loaders
}
// Настройки babel
const babelOptions = preset => {
const opts = {
presets: [
'@babel/preset-env'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
if (preset) {
opts.presets.push(preset)
}
return opts
}
// Загрузчик js, подключение EsLint
const jsLoaders = () => {
const loaders = [{
loader: 'babel-loader',
options: babelOptions()
}, ]
if (isDev) {
loaders.push('eslint-loader')
}
return loaders
}
// Настройки сборки
module.exports = {
context: path.resolve(__dirname, 'src'),
mode: 'development',
entry: ['@babel/polyfill', './index.js'],
output: {
filename: 'bundle.js',
path: (path.resolve(__dirname, './'))
},
resolve: {
extensions: ['.js', '.json', '.png'],
},
optimization: optimization(),
devServer: {
hot: isDev,
port: 4200,
overlay: {
warnings: true,
errors: true
}
},
devtool: isDev ? 'source-map' : '',
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new HTMLWebpackPlugin({
template: './index.html',
minify: {
collapseWhitespace: isProd
}
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin(
[{
from: path.resolve(__dirname, 'src/static'),
to: path.resolve(__dirname, './')
}]
),
new MiniCssExtractPlugin({
filename: filename('css')
})
],
module: {
rules: [{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.js$/,
exclude: [
'/node_modules/',
// path.resolve(__dirname, '../template_resources/static/js/registration.js')
],
use: jsLoaders()
},
{
test: /\.css$/,
use: cssLoaders()
},
{
test: /\.s[ac]ss$/,
use: cssLoaders('sass-loader')
},
{
test: /\.(png|jpg|jpeg|svg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './img'
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
mozjpeg: {
progressive: true,
quality: 80
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.70, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
}
}
]
},
{
test: /\.(ttf|woff|woff2|eot)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './fonts'
}
}]
},
],
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question