168 lignes
4.2 KiB
JavaScript
168 lignes
4.2 KiB
JavaScript
/* eslint-env node */
|
|
const path = require('path');
|
|
|
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
|
const CopyPlugin = require('copy-webpack-plugin');
|
|
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
|
|
const MiniCssExtractPlugin = require('mini-css-extract-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: {
|
|
app: ['./assets/js/app.js', './assets/scss/app.scss']
|
|
},
|
|
|
|
// Path to the directory of fonts wich will be aliased
|
|
FONTS_PATH: 'assets/fonts',
|
|
|
|
// Path to the directory of images which will be compressed and copied
|
|
IMAGES_PATH: 'assets/img',
|
|
|
|
// Path to the directory of SCSS entries which will be aliased
|
|
STYLES_PATH: '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/favicon', to: 'favicon' }
|
|
],
|
|
|
|
// Path to the build output, which can safely be cleaned
|
|
BUILD_PATH: '{{ cookiecutter.project_slug }}/static'
|
|
};
|
|
|
|
// Return Webpack configuration depending on the mode.
|
|
module.exports = function (_, argv) {
|
|
const isDev = argv.mode !== 'production';
|
|
|
|
const config = {
|
|
entry: CONFIG.ENTRIES,
|
|
output: {
|
|
filename: '[name].js',
|
|
chunkFilename: '[name].[contenthash].js',
|
|
path: path.resolve(__dirname, CONFIG.BUILD_PATH)
|
|
},
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.js$/,
|
|
use: {
|
|
loader: 'babel-loader',
|
|
options: {
|
|
presets: [
|
|
['@babel/preset-env', { targets: { esmodules: true } }]
|
|
],
|
|
compact: false
|
|
}
|
|
},
|
|
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: {
|
|
fonts: path.resolve(__dirname, CONFIG.FONTS_PATH),
|
|
styles: path.resolve(__dirname, CONFIG.STYLES_PATH)
|
|
}
|
|
},
|
|
plugins: [
|
|
new CleanWebpackPlugin(),
|
|
new MiniCssExtractPlugin({
|
|
filename: '[name].css',
|
|
chunkFilename: '[name].[contenthash].css'
|
|
}),
|
|
new CopyPlugin({
|
|
patterns: [
|
|
{
|
|
from: CONFIG.IMAGES_PATH,
|
|
to: 'img/'
|
|
},
|
|
...CONFIG.COPY_PATTERNS
|
|
]
|
|
})
|
|
],
|
|
stats: true
|
|
};
|
|
|
|
if (isDev) {
|
|
config.mode = 'development';
|
|
config.devtool = 'cheap-module-source-map';
|
|
config.watchOptions = {
|
|
aggregateTimeout: 1000
|
|
};
|
|
|
|
config.devServer = {
|
|
index: '',
|
|
publicPath: '/static/',
|
|
port: CONFIG.SERVER_PORT,
|
|
proxy: {
|
|
context: path => !path.startsWith('/styleguide'),
|
|
target: CONFIG.SERVER_PROXY
|
|
},
|
|
writeToDisk: true,
|
|
// serve styleguide files
|
|
contentBase: path.join(__dirname, 'styleguide'),
|
|
contentBasePublicPath: '/styleguide',
|
|
watchContentBase: true
|
|
};
|
|
} else {
|
|
config.mode = 'production';
|
|
config.devtool = 'source-map';
|
|
|
|
config.optimization = {
|
|
minimizer: [
|
|
new TerserJSPlugin({ extractComments: false }),
|
|
new CssMinimizerPlugin()
|
|
]
|
|
};
|
|
}
|
|
|
|
return config;
|
|
};
|