163 lines
3.1 KiB
JavaScript
163 lines
3.1 KiB
JavaScript
'use strict'
|
|
|
|
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
|
|
|
|
const path = require('path')
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
|
|
const LOCAL_IDENT_NAME = '[name]_[local]'
|
|
// style files regexes
|
|
const CSS_REGEX = /\.css$/
|
|
const CSS_MODULE_REGEX = /\.module\.css$/
|
|
const SCSS_REGEX = /\.scss$/
|
|
const SCSS_MODULE_REGEX = /\.module\.scss$/
|
|
|
|
const getSassLoader = (cssOptions) => ({
|
|
loader: require.resolve('sass-loader'),
|
|
options: {
|
|
sourceMap: cssOptions.sourceMap,
|
|
implementation: require('sass'),
|
|
},
|
|
})
|
|
|
|
const getStyleLoaders = (cssOptions, preprocesser) => {
|
|
const loaders = [
|
|
MiniCssExtractPlugin.loader,
|
|
{
|
|
loader: require.resolve('css-loader'),
|
|
options: cssOptions,
|
|
},
|
|
{
|
|
loader: require.resolve('postcss-loader'),
|
|
options: {
|
|
sourceMap: cssOptions.sourceMap,
|
|
},
|
|
},
|
|
]
|
|
|
|
if (preprocesser) {
|
|
loaders.push(getSassLoader(cssOptions))
|
|
}
|
|
|
|
return loaders
|
|
}
|
|
|
|
const isDev = process.env.NODE_ENV === 'development'
|
|
|
|
const stats = {
|
|
children: false,
|
|
colors: true,
|
|
modules: false,
|
|
timings: true,
|
|
}
|
|
|
|
module.exports = {
|
|
mode: isDev ? 'development' : 'production',
|
|
|
|
devtool: isDev ? 'cheap-module-source-map' : 'source-map',
|
|
|
|
context: path.resolve(__dirname, 'client'),
|
|
|
|
entry: {
|
|
app: './index.js',
|
|
},
|
|
|
|
output: {
|
|
path: path.resolve('./dist'),
|
|
filename: '[name].js',
|
|
},
|
|
|
|
resolve: {
|
|
extensions: ['.js', '.jsx', '.mjs', '.json'],
|
|
mainFields: ['module', 'jsnext:main', 'browser', 'main'],
|
|
},
|
|
|
|
module: {
|
|
rules: [
|
|
{
|
|
loader: 'babel-loader',
|
|
},
|
|
{
|
|
test: SCSS_MODULE_REGEX,
|
|
use: getStyleLoaders(
|
|
{
|
|
importLoaders: 2,
|
|
sourceMap: true,
|
|
modules: {
|
|
localIdentName: LOCAL_IDENT_NAME,
|
|
},
|
|
},
|
|
true,
|
|
),
|
|
},
|
|
{
|
|
test: SCSS_REGEX,
|
|
exclude: SCSS_MODULE_REGEX,
|
|
use: getStyleLoaders(
|
|
{
|
|
sourceMap: true,
|
|
importLoaders: 2,
|
|
},
|
|
true,
|
|
),
|
|
},
|
|
{
|
|
test: CSS_MODULE_REGEX,
|
|
use: getStyleLoaders(
|
|
{
|
|
sourceMap: true,
|
|
importLoaders: 1,
|
|
modules: {
|
|
localIdentName: LOCAL_IDENT_NAME,
|
|
},
|
|
},
|
|
false,
|
|
),
|
|
},
|
|
{
|
|
test: CSS_REGEX,
|
|
exclude: CSS_MODULE_REGEX,
|
|
use: getStyleLoaders(
|
|
{
|
|
sourceMap: true,
|
|
importLoaders: 1,
|
|
},
|
|
false,
|
|
),
|
|
},
|
|
{
|
|
test: /\.(xml|html|txt|md)$/,
|
|
use: 'raw-loader',
|
|
},
|
|
],
|
|
},
|
|
|
|
stats,
|
|
|
|
optimization: {
|
|
splitChunks: {
|
|
cacheGroups: {
|
|
styles: {
|
|
name: 'styles',
|
|
test: /\.css$/,
|
|
chunks: 'all',
|
|
enforce: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
plugins: [
|
|
new MiniCssExtractPlugin({
|
|
filename: '[name].css',
|
|
}),
|
|
],
|
|
|
|
devServer: {
|
|
host: '0.0.0.0',
|
|
port: 1337,
|
|
contentBase: path.resolve('./static'),
|
|
stats,
|
|
},
|
|
}
|