53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { RuleSetRule } from 'webpack';
|
|
import * as styleLoaders from './styleLoaders';
|
|
|
|
/** using esbuild-loader for ⚡ fast builds */
|
|
const typescriptLoader: RuleSetRule = {
|
|
test: /\.tsx?$/,
|
|
loader: 'esbuild-loader',
|
|
options: {
|
|
loader: 'tsx',
|
|
target: 'es2021',
|
|
},
|
|
};
|
|
|
|
/** convert svgs to react components automatically */
|
|
const svgLoader: RuleSetRule = {
|
|
test: /\.svg$/,
|
|
issuer: /\.tsx?$/,
|
|
loader: '@svgr/webpack',
|
|
};
|
|
|
|
/** these are files that we want to be able to be loaded into the extension folder instead of imported */
|
|
const urlLoader: RuleSetRule = {
|
|
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.mp3$/],
|
|
loader: 'url-loader',
|
|
options: {
|
|
limit: '10000',
|
|
name: 'static/media/[name].[ext]',
|
|
},
|
|
};
|
|
|
|
/** these loaders will allow us to use raw css imports, css modules, raw sass imports, and sass modules */
|
|
const { cssLoader, cssModuleLoader, sassLoader, sassModuleLoader } = styleLoaders;
|
|
|
|
// this is the default file loader, it will be used for any file that doesn't match the other loaders
|
|
const fileLoader: RuleSetRule = {
|
|
loader: 'file-loader',
|
|
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.mp3$/],
|
|
options: {
|
|
name: 'static/media/[name].[ext]',
|
|
},
|
|
};
|
|
|
|
/** the assembled list of loaders in the order that we want webpack to attempt to use them on modules */
|
|
const loaders: RuleSetRule[] = [
|
|
typescriptLoader,
|
|
{
|
|
// IMPORTANT: if you are adding a new loader, it must come before the file loader
|
|
oneOf: [svgLoader, urlLoader, cssLoader, cssModuleLoader, sassLoader, sassModuleLoader, fileLoader],
|
|
},
|
|
];
|
|
|
|
export default loaders;
|