@expo/webpack-config
Version:
The default Webpack configuration used to build Expo apps targeting the web.
130 lines • 6.23 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const path_1 = __importDefault(require("path"));
const paths_1 = require("@expo/config/paths");
const env_1 = require("../env");
const loaders_1 = require("../loaders");
const plugins_1 = require("../plugins");
const utils_1 = require("../utils");
const withAlias_1 = __importDefault(require("./withAlias"));
const withEntry_1 = __importDefault(require("./withEntry"));
/**
* Wrap your existing webpack config with support for Unimodules.
* ex: Storybook `({ config }) => withUnimodules(config)`
*
* @param webpackConfig Optional existing Webpack config to modify.
* @param env Optional Environment options for configuring what features the Webpack config supports.
* @param argv
* @category addons
*/
function withUnimodules(webpackConfig = {}, env = {}, argv = {}) {
var _a;
webpackConfig = withAlias_1.default(webpackConfig);
if (!webpackConfig.module)
webpackConfig.module = { rules: [] };
else if (!webpackConfig.module.rules)
webpackConfig.module = Object.assign(Object.assign({}, webpackConfig.module), { rules: [] });
if (!webpackConfig.plugins)
webpackConfig.plugins = [];
if (!webpackConfig.resolve)
webpackConfig.resolve = {};
if (!webpackConfig.output)
webpackConfig.output = {};
// @ts-ignore: We should attempt to use the project root that the other config is already using (used for Gatsby support).
env.projectRoot = env.projectRoot || webpackConfig.context || paths_1.getPossibleProjectRoot();
// Attempt to use the input webpack config mode
env.mode = env.mode || webpackConfig.mode;
const environment = env_1.validateEnvironment(env);
let { supportsFontLoading } = argv;
// If the args don't specify this then we'll check if the input already supports font loading.
if (typeof supportsFontLoading === 'undefined') {
const supportedFonts = ['ttf', 'otf', 'woff', 'woff2', 'eot'];
const testFontFileNames = supportedFonts.map(ext => path_1.default.resolve(environment.projectRoot, `cool-font.${ext}`));
if (utils_1.rulesMatchAnyFiles(webpackConfig, testFontFileNames)) {
supportsFontLoading = false;
}
}
const { platform = 'web' } = env;
const config = argv.expoConfig || env_1.getConfig(environment);
const mode = env_1.getMode(env);
const locations = env.locations || env_1.getPaths(environment.projectRoot);
const { build: buildConfig = {} } = config.web || {};
const { babel: babelAppConfig = {} } = buildConfig;
const babelProjectRoot = babelAppConfig.root || locations.root;
const babelLoader = loaders_1.createBabelLoader({
projectRoot: locations.root,
mode,
platform,
babelProjectRoot,
verbose: babelAppConfig.verbose,
include: [
...(babelAppConfig.include || []),
...(((_a = env.babel) === null || _a === void 0 ? void 0 : _a.dangerouslyAddModulePathsToTranspile) || []),
],
use: babelAppConfig.use,
});
function reuseOrCreatePublicPaths() {
if (webpackConfig.output && webpackConfig.output.publicPath) {
const publicPath = webpackConfig.output.publicPath;
return {
publicPath,
publicUrl: publicPath.endsWith('/') ? publicPath.slice(0, -1) : publicPath,
};
}
return env_1.getPublicPaths(environment);
}
const { publicPath, publicUrl } = reuseOrCreatePublicPaths();
webpackConfig.mode = mode;
webpackConfig.output = Object.assign(Object.assign({}, webpackConfig.output), { publicPath });
webpackConfig.plugins.push(
// Used for surfacing information related to constants
new plugins_1.ExpoDefinePlugin({
mode,
publicUrl,
config,
productionManifestPath: locations.production.manifest,
}));
const rules = [
...webpackConfig.module.rules,
// TODO: Bacon: Auto remove this loader
{
test: /\.html$/,
use: ['html-loader'],
exclude: locations.template.folder,
},
// Process application code with Babel.
babelLoader,
supportsFontLoading && loaders_1.createFontLoader(locations.root, locations.includeModule),
].filter(Boolean);
webpackConfig.module = Object.assign(Object.assign({}, webpackConfig.module), { rules });
webpackConfig.resolve = Object.assign(Object.assign({}, webpackConfig.resolve), { symlinks: false,
// Support platform extensions like .web.js
extensions: env_1.getModuleFileExtensions('web') });
// We have to transpile these modules and make them not external too.
// We have to do this because next.js by default externals all `node_modules`'s js files.
// Reference:
// https://github.com/martpie/next-transpile-modules/blob/77450a0c0307e4b650d7acfbc18641ef9465f0da/index.js#L48-L62
// https://github.com/zeit/next.js/blob/0b496a45e85f3c9aa3cf2e77eef10888be5884fc/packages/next/build/webpack-config.ts#L185-L258
// `include` function is from https://github.com/expo/expo-cli/blob/3933f3d6ba65bffec2738ece71b62f2c284bd6e4/packages/webpack-config/webpack/loaders/createBabelLoaderAsync.js#L76-L96
const includeFunc = babelLoader.include;
if (webpackConfig.externals) {
webpackConfig.externals = webpackConfig.externals.map((external) => {
if (typeof external !== 'function')
return external;
return (ctx, req, cb) => {
const relPath = path_1.default.join('node_modules', req);
return includeFunc(relPath) ? cb() : external(ctx, req, cb);
};
});
}
// Add a loose requirement on the ResizeObserver polyfill if it's installed...
webpackConfig = withEntry_1.default(webpackConfig, env, {
entryPath: 'resize-observer-polyfill/dist/ResizeObserver.global',
});
return webpackConfig;
}
exports.default = withUnimodules;
//# sourceMappingURL=withUnimodules.js.map