dn-middleware-webpack5
Version:
--- group: middleware name: webpack5 title: Webpack5 ---
313 lines (306 loc) • 11.4 kB
text/typescript
import * as path from "path";
import * as Dawn from "@dawnjs/types";
// import getCSSModuleLocalIdent from "react-dev-utils/getCSSModuleLocalIdent";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import type { ModuleOptions, RuleSetRule } from "webpack/types.d";
import { IGetWebpackConfigOpts } from "../types";
import { getPublicPath } from "./utils";
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// common function to get style loaders
const getStyleLoaders = (
options: {
cssOptions?: object;
preProcessor?: string;
preProcessorOptions?: object;
styleOptions?: object;
},
ctx: Dawn.Context,
) => {
const loaders = [
ctx.injectCSS
? require.resolve("style-loader")
: {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: getPublicPath(ctx),
...options.styleOptions,
},
},
{
loader: require.resolve("css-loader"),
options: {
sourceMap: ctx.isEnvDevelopment,
...options.cssOptions,
},
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in package.json
loader: require.resolve("postcss-loader"),
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
autoprefixer: { flexbox: "no-2009" },
stage: 3,
},
],
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
// "postcss-normalize",
],
},
sourceMap: ctx.isEnvDevelopment,
},
},
].filter(Boolean);
if (options.preProcessor) {
loaders.push(
{
loader: require.resolve("resolve-url-loader"),
options: {
sourceMap: ctx.isEnvDevelopment,
},
},
{
loader: require.resolve(options.preProcessor),
options: {
sourceMap: true,
...options.preProcessorOptions,
},
},
);
}
return loaders;
};
// Generate webpack modules config
// Each module has a smaller surface area than a full program, making verification, debugging, and testing trivial.
// Well-written modules provide solid abstractions and encapsulation boundaries,
// so that each module has a coherent design and a clear purpose within the overall application.
const getModule = async (options: IGetWebpackConfigOpts, ctx: Dawn.Context) => {
const webpackModule: ModuleOptions = {};
const { babelOpts } = await ctx.exec({
env: options.env,
name: "babel",
noEmit: true,
cwd: options.cwd,
target: Array.isArray(options.target)
? options.target
: ["web", "browser"].includes(options.target)
? "browser"
: "node",
type: "cjs",
// fast-refresh now because of an error of its plugin
// extraPlugins: [...(options.hot ? ["react-hot-loader/babel", "react-refresh/babel"] : [])],
jsxRuntime: options.jsxRuntime,
...options.babel,
});
const rules: RuleSetRule[] = [
// It's important to run the linter before Babel processes the JS.
// We do this in lint middleware
{
// "oneOf" will traverse all following loaders until one will match the requirements.
// When no loader matches it will fall back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
limit: "10000",
name: path.join(options?.folders?.media ?? "", "[name].[contenthash:8].[ext]"),
...options.urlLoader,
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
loader: require.resolve("babel-loader"),
options: {
...babelOpts,
exclude: "node_modules/**",
// extensions,
// babelHelpers: options.runtimeHelpers ? "runtime" : "bundled",
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: ctx.isEnvProduction,
// Make sure we have a unique cache identifier, erring on the side of caution.
// We remove this when the user ejects because the default is sane and uses Babel options. Instead of options, we use
// the react-scripts and babel-preset-react-app versions.
// cacheIdentifier: getCacheIdentifier(ctx.isEnvProduction ? "production" : "development", [
// "babel-plugin-named-asset-import",
// "react-dev-utils",
// ]),
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS to a file,
// but in development "style" loader enables hot editing of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders(
{
cssOptions: {
importLoaders: 1,
...options.cssLoader,
},
styleOptions: options.styleLoader,
},
ctx,
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders(
{
cssOptions: {
importLoaders: 1,
modules: true,
...options.cssLoader,
},
styleOptions: options.styleLoader,
},
ctx,
),
},
// Opt-in support for LESS (using .less extensions).
// By default we support LESS Modules with the extensions .module.less
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
cssOptions: {
importLoaders: 3,
...options.cssLoader,
},
styleOptions: options.styleLoader,
preProcessor: "less-loader",
preProcessorOptions: {
lessOptions: {
javascriptEnabled: true,
},
},
},
ctx,
),
// Don't consider CSS imports dead code even if the containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using LESS using the extension .module.less
{
test: lessModuleRegex,
use: getStyleLoaders(
{
cssOptions: {
importLoaders: 3,
modules: true,
...options.cssLoader,
},
styleOptions: options.styleLoader,
preProcessor: "less-loader",
preProcessorOptions: {
lessOptions: {
javascriptEnabled: true,
},
},
},
ctx,
),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
cssOptions: {
importLoaders: 3,
...options.cssLoader,
},
styleOptions: options.styleLoader,
preProcessor: "sass-loader",
preProcessorOptions: {
implementation: require("sass"),
},
},
ctx,
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
cssOptions: {
importLoaders: 3,
modules: true,
...options.cssLoader,
},
styleOptions: options.styleLoader,
preProcessor: "sass-loader",
preProcessorOptions: {
implementation: require("sass"),
},
},
ctx,
),
},
// "file" loader makes sure those assets get served by Server.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules that fall through the other loaders.
{
loader: require.resolve("file-loader"),
// Exclude `js` files to keep "css" loader working as it injects its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: path.join(options?.folders?.media ?? "", "[name].[contenthash:8].[ext]"),
...options.fileLoader,
},
},
// file-loader should be the last one
],
},
];
webpackModule.rules = rules;
return webpackModule;
};
export default getModule;