webpack: Use HtmlWebpackPlugin

5 years ago · 3a5b030b38
5 changed files with 46 additions and 43 deletions
--- a/README.markdown
+++ b/README.markdown
@ -14,3 +14,10 @@ Then run
    $ npm run build

 to create all site code in `dist`. To deploy serve the `dist` directory.
+
+
+## Hack
+
+Dev mode:
+
+    $ npx webpack
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rm -f dist/*.js && rm -f dist/*.css",
+    "clean": "rm -f dist/*.js && rm -f dist/*.css && rm -f dist/*html",
    "build": "webpack --mode production"
  },
  "author": "Nathan Bergey",
@ -18,11 +18,14 @@
  },
  "devDependencies": {
    "css-loader": "^2.1.0",
-    "extract-loader": "^3.1.0",
+    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^3.0.1",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
-    "webpack": "^4.28.4",
-    "webpack-cli": "^3.2.1"
+    "style-loader": "^0.23.1",
+    "webpack": "^3.0.0",
+    "webpack-cli": "^3.2.3"
  }
 }
--- a/dist/index.html
+++ b/dist/index.html
@ -1,8 +1,8 @@
 <!doctype html>
 <html>
  <head>
-    <title>Weather for Philadelphia, PA</title>
-    <link rel="stylesheet" type="text/css" href="style.css" >
+    <title><%= htmlWebpackPlugin.options.title %></title>
+
  </head>
  <body>
    <div class="wrapper">
@ -14,7 +14,5 @@
    <footer>
      <p>Made by natronics in the cold industrial blocks of Philadelphia PA.</p>
    </footer>
-
-    <script src="main.js"></script>
  </body>
 </html>
--- a/src/index.js
+++ b/src/index.js
@ -1,6 +1,7 @@
 var d3 = require('d3')
 import {readxml} from './data.js'
 import {render_calendar, render_nights, render_astronomy, render_temperature, render_clouds} from './render.js'
+import './style.sass'

 const canvas = d3.select('svg')

--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,38 +1,32 @@
-const path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var path = require("path");

-module.exports = [{
-    name: 'js',
+module.exports = {
    entry: ['./src/index.js'],
    output: {
-        filename: 'main.js',
-        path: path.resolve(__dirname, 'dist')
-    }
-},
-{
-    name: 'css',
-    entry: ['./src/style.sass'],
-    module: {
-        rules: [
-        	{
-        		test: /\.sass$/,
-        		use: [
-        			{
-        				loader: 'file-loader',
-        				options: {
-        					name: 'style.css',
-        				}
-        			},
-        			{
-        				loader: 'extract-loader'
-        			},
-        			{
-        				loader: 'css-loader?-url'
-        			},
-        			{
-        				loader: 'sass-loader'
-        			}
-        		]
-        	}
-        ]
-    }
-}];
+        path: path.join(__dirname, "./dist/"),
+        filename: "main.js",
+    },
+    module:{
+        rules:[
+            {
+                test:/\.sass$/,
+                use: ExtractTextPlugin.extract({
+                        fallback:'style-loader',
+                        use:['css-loader','sass-loader']
+                })
+            }
+       ]
+    },
+    plugins: [
+        new ExtractTextPlugin({filename:'style.css'}),
+        new HtmlWebpackPlugin({
+            hash: true,
+            title: 'Weather for Philadelphia, PA',
+            template: './src/index.html',
+            path: path.join(__dirname, "./dist/"),
+            filename: 'index.html'
+        }),
+    ]
+}