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 OptimizeCssAssetPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development';
const optimization = () => {
const config = {
splitChunks: {
chunks: 'all'
}
}
if (!isDev) {
config.minimizer = [
new OptimizeCssAssetPlugin(),
new TerserWebpackPlugin()
]
}
return config;
};
const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`;
const cssLoaders = extra => {
const loaders = [
{
loader: MiniCssExtractPlugin.loader,
options: {
hrm: !isDev,
reloadAll: true
}
},
'css-loader'
]
if (extra) {
loaders.push(extra);
}
return loaders;
};
module.exports = {
context: path.resolve(__dirname, 'src'),
mode: 'development',
entry: {
main: ['@babel/polyfill', './index.js']
},
output: {
filename: filename('js'),
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.js', '.json'],
alias: {
'@': path.resolve(__dirname, 'src')
}
},
devServer: {
port: 4200,
hot: isDev
},
optimization: optimization(),
plugins: [
new HTMLWebpackPlugin({
template: path.resolve(__dirname, 'src/index.pug'),
filename: 'index.html',
minify: {
collapseWhitespace: !isDev
}
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/favicon.ico'),
to: path.resolve(__dirname, 'dist')
},
{
from: path.resolve(__dirname, 'src/img'),
to: path.resolve(__dirname, 'dist/img')
},
{
from: path.resolve(__dirname, 'src/fonts'),
to: path.resolve(__dirname, 'dist/fonts')
}
]
}),
new MiniCssExtractPlugin({
filename: filename('css')
})
],
module: {
rules: [
{
test: /\.css$/,
use: cssLoaders()
},
{
test: /\.(png|jpg|svg|gif)$/,
use: ['file-loader']
},
{
test: /\.(ttf|woff|woff2|eot)/,
use: ['file-loader']
},
{
test: /\.s[ac]ss$/,
use: cssLoaders('sass-loader')
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.pug$/,
loader: 'pug-loader',
options: {
pretty: isDev
}
}
]
}
}
-
Вопрос задан
-
91 просмотр