feat(babel): load images as data urls or static urls

Related to #4
saiichihashimoto · Feb 10, 2019 · 52d3a0f · 52d3a0f
1 parent b6626b9
commit 52d3a0f
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 3 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -39,18 +39,45 @@ module.exports = {
 			},
 		],
 		'transform-dynamic-import',
-
 		[
 			'extension-resolver',
 			{
-				extensions: ['.server.js', '.server.jsx', '.server.es6', '.server.es', '.server.mjs', '.js', '.jsx', '.es6', '.es', '.mjs'],
+				extensions: [
+					'.server.js',
+					'.server.jsx',
+					'.server.es6',
+					'.server.es',
+					'.server.mjs',
+					'.js',
+					'.jsx',
+					'.es6',
+					'.es',
+					'.mjs',
+				],
 			},
 		],
 		[
 			'css-modules-transform',
 			{
+				extensions: [
+					'.module.css',
+					'.module.scss',
+				],
 				generateScopedName: (localName, resourcePath) => getCSSModuleLocalIdent({ resourcePath }, '[hash:base64]', localName, {}),
-				extensions:         ['.module.css', '.module.scss'],
+			},
+		],
+		[
+			'transform-assets',
+			{
+				extensions: [
+					'bmp',
+					'gif',
+					'jpeg',
+					'jpg',
+					'png',
+				],
+				name:  `${process.env.PUBLIC_URL || ''}/static/media/[name].[hash:8].[ext]`,
+				limit: 10000,
 			},
 		],
 		'universal-dotenv',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "@babel/preset-react": "7.0.0",
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-extension-resolver": "github:GingerBear/babel-plugin-extension-resolver#03616d48fe9542a3e92bbb25c17c4f0437fe10cd",
+    "babel-plugin-transform-assets": "1.0.2",
     "babel-plugin-transform-dynamic-import": "2.1.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-plugin-universal-dotenv": "1.1.0",