186 lignes
4.6 KiB
JavaScript
186 lignes
4.6 KiB
JavaScript
/* eslint-env node */
|
|
const path = require('path');
|
|
|
|
const CopyPlugin = require('copy-webpack-plugin');
|
|
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
|
|
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
|
|
const TerserJSPlugin = require('terser-webpack-plugin');
|
|
|
|
const CONFIG = {
|
|
// Proxy target of the BrowserSync'server
|
|
SERVER_PROXY: 'http://127.0.0.1:8000',
|
|
|
|
// Port on which the BrowserSync'server will listen
|
|
SERVER_PORT: 8090,
|
|
|
|
// Paths to entries which will be bundled
|
|
ENTRIES: {
|
|
main: ['./assets/js/main.js', './assets/scss/main.scss'],
|
|
admin: ['./assets/scss/admin.scss'],
|
|
},
|
|
|
|
// Folders to create aliases for in JavaScript and SCSS
|
|
// See: https://webpack.js.org/concepts/entry-points/
|
|
ALIASES: {
|
|
// fonts: path.resolve(__dirname, 'assets/fonts'),
|
|
// styles: path.resolve(__dirname, 'assets/scss'),
|
|
},
|
|
|
|
// Path to other assets wich will be copied with copy-webpack-plugin
|
|
// See: https://www.npmjs.com/package/copy-webpack-plugin
|
|
COPY_PATTERNS: [
|
|
{ from: 'assets/img', to: 'img' },
|
|
{ from: 'assets/favicon', to: '' },
|
|
],
|
|
|
|
// SVG Sprite's generation for the defined icons
|
|
// See: https://www.npmjs.com/package/svg-spritemap-webpack-plugin
|
|
ICONS_PATERN: 'assets/icons/*.svg',
|
|
ICONS_SPRITE_FILENAME: 'icons-sprite.svg',
|
|
|
|
// Path to the build output, which can safely be cleaned
|
|
BUILD_PATH: 'bikeeco/static',
|
|
};
|
|
|
|
// Return Webpack configuration depending on the mode.
|
|
module.exports = function (_, argv) {
|
|
const isDev = argv.mode !== 'production';
|
|
|
|
const config = {
|
|
entry: CONFIG.ENTRIES,
|
|
output: {
|
|
clean: true,
|
|
filename: '[name].js',
|
|
chunkFilename: '[name].[contenthash].js',
|
|
path: path.resolve(__dirname, CONFIG.BUILD_PATH),
|
|
},
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.js$/,
|
|
use: { loader: 'babel-loader' },
|
|
resolve: {
|
|
alias: {
|
|
bootstrap: 'bootstrap/js/src',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
test: /\.(sa|sc|c)ss$/,
|
|
use: [
|
|
{
|
|
loader: MiniCssExtractPlugin.loader,
|
|
options: {
|
|
publicPath: '',
|
|
},
|
|
},
|
|
{ loader: 'css-loader' },
|
|
{
|
|
loader: 'postcss-loader',
|
|
options: {
|
|
postcssOptions: {
|
|
plugins: ['autoprefixer'],
|
|
},
|
|
},
|
|
},
|
|
{ loader: 'sass-loader' },
|
|
],
|
|
},
|
|
{
|
|
test: /\.(png|jpe?g|gif|svg)$/,
|
|
type: 'asset/resource',
|
|
generator: {
|
|
filename: 'img/[name][ext]',
|
|
},
|
|
},
|
|
{
|
|
test: /\.(woff2?|ttf|otf|eot)$/,
|
|
type: 'asset/resource',
|
|
generator: {
|
|
filename: 'fonts/[name][ext]',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
resolve: {
|
|
alias: CONFIG.ALIASES,
|
|
},
|
|
plugins: [
|
|
new RemoveEmptyScriptsPlugin(),
|
|
new MiniCssExtractPlugin({
|
|
filename: '[name].css',
|
|
chunkFilename: '[name].[contenthash].css',
|
|
}),
|
|
],
|
|
stats: true,
|
|
};
|
|
|
|
if (CONFIG.COPY_PATTERNS.length) {
|
|
config.plugins.push(
|
|
new CopyPlugin({
|
|
patterns: CONFIG.COPY_PATTERNS,
|
|
})
|
|
);
|
|
}
|
|
|
|
if (CONFIG.ICONS_PATERN) {
|
|
config.plugins.push(
|
|
new SVGSpritemapPlugin(CONFIG.ICONS_PATERN, {
|
|
input: {
|
|
options: {
|
|
realpath: true,
|
|
},
|
|
},
|
|
output: {
|
|
filename: CONFIG.ICONS_SPRITE_FILENAME,
|
|
},
|
|
sprite: {
|
|
prefix: '',
|
|
generate: { title: false },
|
|
},
|
|
})
|
|
);
|
|
}
|
|
|
|
if (isDev) {
|
|
config.mode = 'development';
|
|
config.devtool = 'cheap-module-source-map';
|
|
config.watchOptions = {
|
|
aggregateTimeout: 1000,
|
|
};
|
|
|
|
config.devServer = {
|
|
devMiddleware: {
|
|
publicPath: '/static',
|
|
writeToDisk: true,
|
|
},
|
|
host: 'localhost',
|
|
port: CONFIG.SERVER_PORT,
|
|
proxy: {
|
|
context: (path) => !/^\/styleguide(\/|$)/.test(path),
|
|
target: CONFIG.SERVER_PROXY,
|
|
},
|
|
static: [
|
|
{
|
|
directory: path.join(__dirname, 'styleguide'),
|
|
publicPath: '/styleguide',
|
|
},
|
|
],
|
|
};
|
|
} else {
|
|
config.mode = 'production';
|
|
config.devtool = 'source-map';
|
|
|
|
config.optimization = {
|
|
minimizer: [
|
|
new TerserJSPlugin({ extractComments: false }),
|
|
new CssMinimizerPlugin(),
|
|
],
|
|
};
|
|
}
|
|
|
|
return config;
|
|
};
|