feat(webpack): Handle more file types (image, font, audio)

clippedjs · Jan 1, 2018 · 79ed44e · 79ed44e
1 parent bf9449a
commit 79ed44e
Show file tree

Hide file tree

Showing 10 changed files with 1,997 additions and 68 deletions.
diff --git a/presets/webpack-frontend/clipped.config.js b/presets/webpack-frontend/clipped.config.js
@@ -16,6 +16,42 @@ module.exports = async (clipped) => {
   clipped.config.webpack.resolveLoader.modules
     .add(path.join(__dirname, 'node_modules'))
 
+  clipped.config.webpack.module
+    .rule('img')
+    .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
+    .include
+    .add(clipped.resolve('src'))
+    .end()
+    .use('url').loader(require.resolve('url-loader'))
+    .options({
+      limit: 10000,
+      name: '[name].[hash:7].[ext]'
+    }).end()
+
+  clipped.config.webpack.module
+    .rule('audio')
+    .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
+    .include
+    .add(clipped.resolve('src'))
+    .end()
+    .use('url').loader(require.resolve('url-loader'))
+    .options({
+      limit: 10000,
+      name: '[name].[hash:7].[ext]'
+    }).end()
+
+  clipped.config.webpack.module
+    .rule('font')
+    .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
+    .include
+    .add(clipped.resolve('src'))
+    .end()
+    .use('url').loader(require.resolve('url-loader'))
+    .options({
+      limit: 10000,
+      name: '[name].[hash:7].[ext]'
+    }).end()
+
   clipped.config.webpack.module
     .rule('css')
     .test(/\.css$/)

diff --git a/presets/webpack-frontend/package-lock.json b/presets/webpack-frontend/package-lock.json
diff --git a/presets/webpack-frontend/package.json b/presets/webpack-frontend/package.json
@@ -1,23 +1,25 @@
 {
   "name": "clipped-preset-webpack-frontend",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "",
   "main": "clipped.config.js",
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "babel-preset-react": "^6.24.1",
-    "clipped-preset-webpack": "^0.3.3",
+    "clipped-preset-webpack": "^0.4.0",
     "css-loader": "^0.28.7",
     "deepmerge": "^2.0.1",
+    "file-loader": "^1.1.6",
     "html-webpack-plugin": "^2.30.1",
     "html-webpack-template": "^6.1.0",
     "node-sass": "^4.7.2",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
+    "url-loader": "^0.6.2",
     "vue-loader": "^13.6.1",
     "vue-template-compiler": "^2.5.13",
     "webpack": "^3.10.0",