varan
Version:
A webpack starter kit for offline-first bring-your-own-code apps with server side rendering
225 lines • 8.88 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
const postcss_preset_env_1 = __importDefault(require("postcss-preset-env"));
const cssnano_1 = __importDefault(require("cssnano"));
const lodash_1 = require("lodash");
const path_1 = __importDefault(require("path"));
const babel_preset_varan_1 = __importDefault(require("babel-preset-varan"));
// Init
const getOpts = (options) => {
const appDir = options.appDir || process.cwd();
const resolve = (relativePath) => path_1.default.resolve(appDir, relativePath);
return lodash_1.defaults({}, options, {
appDir: resolve('./'),
env: process.env.NODE_ENV,
target: 'web',
});
};
const getStyleLoaders = ({ isDev, isNode }, cssOptions, preProcessor) => {
return [
!isNode && (isDev ? { loader: require.resolve('style-loader') } : { loader: mini_css_extract_plugin_1.default.loader }),
{
loader: require.resolve('css-loader'),
options: Object.assign({ onlyLocals: isNode, importLoaders: preProcessor ? 3 : 1, sourceMap: isDev, localsConvention: 'camelCase' }, cssOptions),
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: [postcss_preset_env_1.default(), !isNode && !isDev && cssnano_1.default({ preset: 'default' })].filter(Boolean),
sourceMap: isDev,
},
},
!!preProcessor && {
loader: require.resolve('resolve-url-loader'),
options: {
esModule: false,
keepQuery: true,
},
},
preProcessor,
].filter(Boolean);
};
// Exports
exports.default = (options) => {
const opts = getOpts(options);
const isDev = opts.env !== 'production';
const isNode = opts.target === 'node';
const responsiveImages = [/\.jpe?g$/, /\.png$/];
const images = [/\.bmp$/, /\.gif$/, /\.svg$/, /\.webp$/];
const manifests = [/(\.webmanifest|browserconfig\.xml)$/];
const sources = /\.(jsx?|mjs|tsx?)$/;
const safeIssuers = [/\.(le|sa|sc|c)ss$/, /\.styl$/, /\.styl$/].concat(sources);
return {
target: opts.target,
mode: isDev ? 'development' : 'production',
bail: !isDev,
context: opts.appDir,
resolve: {
extensions: ['.js', '.jsx', '.mjs', '.json', '.ts', '.tsx'],
alias: {
'webpack-hot-client/client': require.resolve('webpack-hot-client/client'),
},
},
output: {
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: (info) => `file://${path_1.default.resolve(info.absoluteResourcePath).replace(/\\/g, '/')}`,
},
performance: isDev ? { hints: false } : undefined,
stats: 'errors-only',
module: {
strictExportPresence: true,
rules: [
{ parser: { requireEnsure: false } },
/**
* Transpile js files
*/
{
test: sources,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: isDev,
presets: [[babel_preset_varan_1.default]],
},
},
/**
* CSS Styles
*/
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: getStyleLoaders({ isDev, isNode }, { modules: false }),
},
/**
* CSS Modules
*/
{
test: /\.module\.css$/,
use: getStyleLoaders({ isDev, isNode }, {
modules: {
localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64]',
},
}),
},
/**
* SASS & SCSS Styles
*/
{
test: /\.(sa|sc)ss$/,
exclude: /\.module\.(sa|sc)ss$/,
use: getStyleLoaders({ isDev, isNode }, { modules: false }, {
loader: require.resolve('sass-loader'),
options: {
sassOptions: {
implementation: require('sass'),
},
},
}),
},
/**
* SASS & SCSS Modules
*/
{
test: /\.module\.(sa|sc)ss$/,
use: getStyleLoaders({ isDev, isNode }, {
modules: {
localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64]',
},
}, {
loader: require.resolve('sass-loader'),
options: {
sassOptions: {
implementation: require('sass'),
},
},
}),
},
/**
* Fallback images
*/
{
test: images,
oneOf: [
{
issuer: safeIssuers,
loader: require.resolve('url-loader'),
options: {
esModule: false,
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
fallback: {
loader: require.resolve('file-loader'),
options: { esModule: false },
},
},
},
{
loader: require.resolve('file-loader'),
options: { esModule: false, name: 'static/media/[name].[hash:8].[ext]' },
},
],
},
/**
* Responsive images
*/
{
test: responsiveImages,
use: [
{
loader: require.resolve('../lib/responsiveSourceOnlyLoader'),
},
{
loader: require.resolve('url-loader'),
options: {
esModule: false,
limit: 10000,
name: 'static/media/[name].[width].[hash:8].[ext]',
adapter: require('responsive-loader/sharp'),
fallback: !isDev ? require.resolve('responsive-loader') : undefined,
},
},
],
},
/**
* Generate app manifests
*/
{
test: manifests,
use: [
{
loader: require.resolve('file-loader'),
options: { esModule: false },
},
{
loader: require.resolve('app-manifest-loader'),
},
],
},
/**
* Fallback for all other files
*/
{
exclude: [
/\.html$/,
/\.(le|sa|sc|c)ss$/,
/\.json$/,
/\.(ejs|pug|hbs)$/,
/\.(jsx?|mjs|tsx?)$/,
/\.vue$/,
...images,
...responsiveImages,
...manifests,
],
loader: require.resolve('file-loader'),
options: { esModule: false, name: 'static/media/[name].[hash:8].[ext]' },
},
].filter(Boolean),
},
};
};
//# sourceMappingURL=createCommonConfig.js.map