static-cms/scripts/webpack.js
Erez Rokah 2b41d8a838 feat: bundle assets with content (#2958)
* fix(media_folder_relative): use collection name in unpublished entry

* refactor: pass arguments as object to AssetProxy ctor

* feat: support media folders per collection

* feat: resolve media files path based on entry path

* fix: asset public path resolving

* refactor: introduce typescript for AssetProxy

* refactor: code cleanup

* refactor(asset-proxy): add tests,switch to typescript,extract arguments

* refactor: typescript for editorialWorkflow

* refactor: add typescript for media library actions

* refactor: fix type error on map set

* refactor: move locale selector into reducer

* refactor: add typescript for entries actions

* refactor: remove duplication between asset store and media lib

* feat: load assets from backend using API

* refactor(github): add typescript, cache media files

* fix: don't load media URL if already loaded

* feat: add media folder config to collection

* fix: load assets from API when not in UI state

* feat: load entry media files when opening media library

* fix: editorial workflow draft media files bug fixes

* test(unit): fix unit tests

* fix: editor control losing focus

* style: add eslint object-shorthand rule

* test(cypress): re-record mock data

* fix: fix non github backends, large media

* test: uncomment only in tests

* fix(backend-test): add missing displayURL property

* test(e2e): add media library tests

* test(e2e): enable visual testing

* test(e2e): add github backend media library tests

* test(e2e): add git-gateway large media tests

* chore: post rebase fixes

* test: fix tests

* test: fix tests

* test(cypress): fix tests

* docs: add media_folder docs

* test(e2e): add media library delete test

* test(e2e): try and fix image comparison on CI

* ci: reduce test machines from 9 to 8

* test: add reducers and selectors unit tests

* test(e2e): disable visual regression testing for now

* test: add getAsset unit tests

* refactor: use Asset class component instead of hooks

* build: don't inline source maps

* test: add more media path tests
2019-12-18 11:16:02 -05:00

151 lines
4.0 KiB
JavaScript

const path = require('path');
const webpack = require('webpack');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const { flatMap } = require('lodash');
const { toGlobalName, externals } = require('./externals');
const pkg = require(path.join(process.cwd(), 'package.json'));
const isProduction = process.env.NODE_ENV === 'production';
const isTest = process.env.NODE_ENV === 'test';
const moduleNameToPath = libName => `${path.resolve(__dirname, `../node_modules/${libName}`)}/`;
const rules = () => ({
js: () => ({
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
rootMode: 'upward',
},
},
}),
css: () => [
{
test: /\.css$/,
include: ['ol', 'redux-notifications', 'react-datetime', 'codemirror'].map(moduleNameToPath),
use: ['to-string-loader', 'css-loader'],
},
],
svg: () => ({
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
exclude: [/node_modules/],
use: 'svg-inline-loader',
}),
});
const plugins = () => {
return {
ignoreEsprima: () => new webpack.IgnorePlugin(/^esprima$/, /js-yaml/),
ignoreMomentOptionalDeps: () => new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
friendlyErrors: () => new FriendlyErrorsWebpackPlugin(),
};
};
const stats = () => {
if (isProduction) {
return {
builtAt: false,
chunks: false,
colors: true,
entrypoints: false,
errorDetails: false,
hash: false,
modules: false,
timings: false,
version: false,
warnings: false,
};
}
return {
all: false,
};
};
const umdPath = path.resolve(process.cwd(), 'dist');
const umdDirPath = path.resolve(process.cwd(), 'dist/umd');
const cjsPath = path.resolve(process.cwd(), 'dist/cjs');
const targetOutputs = () => {
console.log(`Building [${pkg.name}, library: ${toGlobalName(pkg.name)}]`);
return {
umd: {
path: umdPath,
filename: `${pkg.name}.js`,
library: toGlobalName(pkg.name),
libraryTarget: 'umd',
libraryExport: toGlobalName(pkg.name),
umdNamedDefine: true,
globalObject: 'window',
},
umddir: {
path: umdDirPath,
filename: `index.js`,
library: toGlobalName(pkg.name),
libraryTarget: 'umd',
libraryExport: toGlobalName(pkg.name),
umdNamedDefine: true,
globalObject: 'window',
},
cjs: {
path: cjsPath,
filename: 'index.js',
library: toGlobalName(pkg.name),
libraryTarget: 'window',
},
};
};
const umdExternals = Object.keys(pkg.peerDependencies || {}).reduce((previous, key) => {
if (!externals[key]) throw `Missing external [${key}]`;
previous[key] = externals[key] || null;
return previous;
}, {});
/**
* Use [getConfig({ target:'umd' }), getConfig({ target:'cjs' })] for
* getting multiple configs and add the new output in targetOutputs if needed.
* Default: umd
*/
const baseConfig = ({ target = isProduction ? 'umd' : 'umddir' } = {}) => ({
context: process.cwd(),
mode: isProduction ? 'production' : 'development',
entry: './src/index.js',
output: targetOutputs()[target],
module: {
rules: flatMap(Object.values(rules()), rule => rule()),
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
},
plugins: Object.values(plugins()).map(plugin => plugin()),
devtool: isTest ? '' : 'source-map',
target: 'web',
/**
* Exclude peer dependencies from package bundles.
*/
externals:
target.substr(0, 3) === 'umd'
? umdExternals
: (context, request, cb) => {
const externals = Object.keys(pkg.peerDependencies || {});
const isPeerDep = dep => new RegExp(`^${dep}($|/)`).test(request);
return externals.some(isPeerDep) ? cb(null, request) : cb();
},
stats: stats(),
});
const getConfig = ({ baseOnly = false } = {}) => {
if (baseOnly) {
// netlify-cms build
return baseConfig({ target: 'umd' });
}
return [baseConfig({ target: 'umd' })];
};
module.exports = {
getConfig,
rules: rules(),
plugins: plugins(),
};