{
"name": "learn-wp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve",
"build-dev": "webpack",
"build-prod": "webpack --node-env=production",
"clear": "rd /s /q dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"devDependencies": {
"@babel/core": "^7.19.6",
"@babel/preset-env": "^7.19.4",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"group-css-media-queries-loader": "^4.3.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"image-webpack-loader": "^8.1.0",
"mini-css-extract-plugin": "^2.6.1",
"postcss": "^8.4.18",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.2",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"@babel/polyfill": "^7.12.1"
}
}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const mode = process.env.NODE_ENV || 'development';
const devMode = mode === 'development';
const target = devMode ? 'web' : 'browserslist';
const devtool = devMode ? 'source-map' : undefined;
module.exports = {
mode,
target,
devtool,
devServer: {
port: 3000,
open: true,
hot: true,
},
entry: ['@babel/polyfill', path.resolve(__dirname, 'src', 'index.js')],
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: '[name].[contenthash].js',
assetModuleFilename: 'assets/[name][ext]'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html'),
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
],
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.(c|sa|sc)ss$/i,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('postcss-preset-env')],
},
},
},
'group-css-media-queries-loader',
'sass-loader',
],
},
{
test: /\.woff2?$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[name][ext]'
}
},
{
test: /\.(jpe?g|png|webp|gif|svg)$/i,
use: [
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
},
}
}
],
type: 'asset/resource',
},
{
test: /\.m?js$/i,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};
Простой
