natronics
/
weather-board
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Browse Source

webpack: Use HtmlWebpackPlugin

master
Nathan Bergey 6 years ago
parent
6b0c752a94
commit
3a5b030b38
5 changed files with 46 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      README.markdown
  2. 11
      package.json
  3. 6
      src/index.html
  4. 1
      src/index.js
  5. 54
      webpack.config.js

7
README.markdown
View File

@ -14,3 +14,10 @@ Then run
$ npm run build $ npm run build
to create all site code in `dist`. To deploy serve the `dist` directory. to create all site code in `dist`. To deploy serve the `dist` directory.
## Hack
Dev mode:
$ npx webpack

11
package.json
View File

@ -6,7 +6,7 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "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" "build": "webpack --mode production"
}, },
"author": "Nathan Bergey", "author": "Nathan Bergey",
@ -18,11 +18,14 @@
}, },
"devDependencies": { "devDependencies": {
"css-loader": "^2.1.0", "css-loader": "^2.1.0",
"extract-loader": "^3.1.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^3.0.1", "file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0", "node-sass": "^4.11.0",
"sass-loader": "^7.1.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"
} }
} }

6
dist/index.html → src/index.html
View File

@ -1,8 +1,8 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Weather for Philadelphia, PA</title>
<link rel="stylesheet" type="text/css" href="style.css" >
<title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
@ -14,7 +14,5 @@
<footer> <footer>
<p>Made by natronics in the cold industrial blocks of Philadelphia PA.</p> <p>Made by natronics in the cold industrial blocks of Philadelphia PA.</p>
</footer> </footer>
<script src="main.js"></script>
</body> </body>
</html> </html>

1
src/index.js
View File

@ -1,6 +1,7 @@
var d3 = require('d3') var d3 = require('d3')
import {readxml} from './data.js' import {readxml} from './data.js'
import {render_calendar, render_nights, render_astronomy, render_temperature, render_clouds} from './render.js' import {render_calendar, render_nights, render_astronomy, render_temperature, render_clouds} from './render.js'
import './style.sass'
const canvas = d3.select('svg') const canvas = d3.select('svg')

54
webpack.config.js
View File

@ -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'], entry: ['./src/index.js'],
output: { 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'
path: path.join(__dirname, "./dist/"),
filename: "main.js",
}, },
module:{
rules:[
{ {
loader: 'css-loader?-url'
},
{
loader: 'sass-loader'
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'
}),
] ]
}
}];
}
Write Preview
Loading…
Cancel
Save