dn-middleware-webpack5
Version:
--- group: middleware name: webpack5 title: Webpack5 ---
274 lines (258 loc) • 11.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var path = _interopRequireWildcard(require("path"));
var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
// import getCSSModuleLocalIdent from "react-dev-utils/getCSSModuleLocalIdent";
// 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, ctx) => {
const loaders = [ctx.injectCSS ? require.resolve("style-loader") : {
loader: _miniCssExtractPlugin.default.loader,
options: {
publicPath: (0, _utils.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, ctx) => {
var _options$folders$medi, _options$folders, _options$folders$medi2, _options$folders2;
const webpackModule = {};
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 = [// 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$medi = options === null || options === void 0 ? void 0 : (_options$folders = options.folders) === null || _options$folders === void 0 ? void 0 : _options$folders.media) !== null && _options$folders$medi !== void 0 ? _options$folders$medi : "", "[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$medi2 = options === null || options === void 0 ? void 0 : (_options$folders2 = options.folders) === null || _options$folders2 === void 0 ? void 0 : _options$folders2.media) !== null && _options$folders$medi2 !== void 0 ? _options$folders$medi2 : "", "[name].[contenthash:8].[ext]"),
...options.fileLoader
}
} // file-loader should be the last one
]
}];
webpackModule.rules = rules;
return webpackModule;
};
var _default = getModule;
exports.default = _default;
module.exports = exports.default;