Merge pull request #340 from saguijs/html-loader

Add support to load HTML files 🌎
saguijs · Apr 23, 2017 · 9e70dbe · 9e70dbe
2 parents c6e3d84 + 2533cdc
commit 9e70dbe
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -79,6 +79,7 @@ The development server out-of-the-box has live reloading and **hot-module replac
 Sagui uses [Webpack](http://webpack.github.io/) as its underlying bundling tool. The biggest feature that Webpack provides is that everything is a module. Sagui supports the following module types by default:
 
 - Fonts (`.woff`, `.woff2`, `.ttf`, `.eot`, `.otf`)
+- HTML (`.html`)
 - Images (`.png`, `.jpg`, `.jpeg`, `.gif`, `.svg`)
 - JavaScript (`.js`, `.es6`, `.jsx`) via [Babel]((http://babeljs.io/docs/learn-es2015/))
 - JSON
@@ -345,6 +346,7 @@ module.exports = {
 Possible values:
 
 - `font`
+- `html`
 - `image`
 - `javaScript`
 - `style`

diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "flow-bin": "0.43.1",
     "fs-extra": "^2.1.2",
     "happypack": "^3.0.3",
+    "html-loader": "^0.4.5",
     "html-webpack-plugin": "^2.28.0",
     "jasmine-core": "^2.5.2",
     "karma": "^1.6.0",

diff --git a/spec/fixtures/project-content/index.js b/spec/fixtures/project-content/index.js
@@ -3,5 +3,6 @@ import cssModule from './css-module.css'
 import scssModule from './css-module.scss'
 import './react-component'
 import './object-rest'
+import './page.html'
 
 console.log(text, cssModule.batata, scssModule.batata)
diff --git a/spec/fixtures/project-content/page.html b/spec/fixtures/project-content/page.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Testing</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+</head>
+<body>
+  <h1>Hello World</h1>
+</body>
+</html>
diff --git a/src/configure-webpack/loaders/html.js b/src/configure-webpack/loaders/html.js
@@ -0,0 +1,20 @@
+import fileExtensions from '../../file-extensions'
+
+export default {
+  name: 'html',
+  configure ({ optimize }) {
+    return {
+      module: {
+        rules: [
+          {
+            test: fileExtensions.test.HTML,
+            loader: 'html-loader',
+            options: {
+              minimize: optimize
+            }
+          }
+        ]
+      }
+    }
+  }
+}
diff --git a/src/configure-webpack/loaders/html.spec.js b/src/configure-webpack/loaders/html.spec.js
@@ -0,0 +1,11 @@
+import { expect } from 'chai'
+
+import loader from './html'
+
+describe('html', function () {
+  it('should have a html loader', function () {
+    const webpackConfig = loader.configure({})
+    const webpackLoader = webpackConfig.module.rules.find((loader) => loader.loader === 'html-loader')
+    expect(webpackLoader.test).eql(/\.html$/)
+  })
+})
diff --git a/src/configure-webpack/loaders/index.js b/src/configure-webpack/loaders/index.js
@@ -1,6 +1,7 @@
 import merge from 'webpack-merge'
 
 import font from './font'
+import html from './html'
 import image from './image'
 import javaScript from './javascript'
 import style from './style'
@@ -10,6 +11,7 @@ import yaml from './yaml'
 
 const loaders = [
   font,
+  html,
   image,
   javaScript,
   style,

diff --git a/src/configure-webpack/loaders/index.spec.js b/src/configure-webpack/loaders/index.spec.js
@@ -15,7 +15,7 @@ describe('buildLoadersConfig', function () {
   it('should allow disabling all loaders', () => {
     const saguiConfig = {
       ...baseSaguiConfig,
-      disableLoaders: ['font', 'image', 'javaScript', 'json', 'style', 'txt', 'video', 'yaml']
+      disableLoaders: ['font', 'html', 'image', 'javaScript', 'json', 'style', 'txt', 'video', 'yaml']
     }
 
     const config = buildLoadersConfig(saguiConfig)

diff --git a/src/file-extensions.js b/src/file-extensions.js
@@ -5,6 +5,7 @@ export default {
   test: {
     CSS: /\.css$/,
     EOT: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+    HTML: /\.html$/,
     IMAGE: /\.(png|jpg|jpeg|gif|svg)$/,
     JAVASCRIPT: /\.(jsx?|es6)$/,
     JSON: /\.(json)$/,