update front bundle

.eslintignore

@@ -1 +1,2 @@
 src/client/index.js
+src/*.built

.gitignore

@@ -1,10 +1,10 @@
 package-lock.json
 node_modules
-built
 .vscode
 *.log
 *.old
 
+/src/*.built
 /.configs/*
 !/.configs/README.md
 !/.configs/*.default.json

package.json

@@ -1,19 +1,18 @@
 {
   "name": "frost-web",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Frost Web Server",
   "private": true,
-  "main": "./built/index.js",
+  "main": "./src/index.js",
   "engines": {
     "node": ">= 8.0.0"
   },
   "scripts": {
     "start": "node --use_strict ./",
-    "build:copy": "cpx \"./src/{*.js,server/**/*.js,server/views/**/*.pug,client/images/**}\" built",
-    "build:sass": "node-sass --output-style compressed \"src/client/styles\" -o \"built/client/styles\"",
+    "build:copy": "cpx \"./src/client/images/**\" ./src/client.built/images",
     "build:bundle": "webpack",
-    "build": "npm run build:copy && npm run build:sass && npm run build:bundle",
-    "clean": "rimraf \"./built\"",
+    "build": "npm run build:copy && npm run build:bundle",
+    "clean": "rimraf \"./src/*.built\"",
     "rebuild": "npm run clean && npm run build",
     "test:lint": "eslint \"./src/**/*.js\"",
     "test:mocha": "mocha -A --use_strict",
@@ -36,6 +35,7 @@
     "cookie": "0.3.x",
     "cookie-parser": "1.4.x",
     "cpx": "1.5.x",
+    "css-loader": "^0.28.11",
     "csurf": "1.9.x",
     "eslint": "4.x",
     "eslint-config-standard": "11.x",
@@ -58,6 +58,9 @@
     "riot": "3.5.x",
     "riot-route": "3.1.x",
     "riot-tag-loader": "1.0.x",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "3.x",
     "websocket": "1.0.x",
     "websocket-events": "1.0.x"

src/client/index.js

@@ -169,3 +169,5 @@ const fetchJson = require('./helpers/fetch-json');
 	console.log('何かがおかしいよ');
 	console.log(err);
 });
+
+require('./styles/page.scss');

src/client/styles/page.scss

@@ -106,4 +106,4 @@ p, ul, form {
 
 fieldset, input, select, textarea {
 	margin-bottom: 0.8rem;
-}
+}

src/server/httpServer.js

@@ -81,7 +81,7 @@ module.exports = async (hostApiConnection, debug, config) => {
 				}
 
 				let pageRenderParams = {
-					scriptFile: '/bundle.js',
+					scriptFile: '/main.js',
 					params: pageParams
 				};
 				pageRenderParams = Object.assign(pageRenderParams, renderParams);
@@ -98,7 +98,7 @@ module.exports = async (hostApiConnection, debug, config) => {
 
 	// static files
 
-	app.use(express.static(path.join(__dirname, '../client'), { etag: false }));
+	app.use(express.static(path.join(__dirname, '../client.built'), { etag: false }));
 
 	// == routings ==
 

src/server/views/page.pug

@@ -17,7 +17,6 @@ html(lang='ja')
 		link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css')
 		link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css')
 		link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css')
-		link(rel='stylesheet', href='/styles/page.css')
 		if (scriptFile != null)
 			script(src=scriptFile, async)
 		if params['siteKey'] != null

webpack.config.js

@@ -1,50 +1,46 @@
 const path = require('path');
 const webpack = require('webpack');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
-const absolutePath = (relative) => path.join(__dirname, relative);
+const absolutePath = (relative) => path.resolve(__dirname, relative);
 
 module.exports = {
-	context: absolutePath('src/client'),
 	entry: {
-		bundle: './index.js'
+		main: './src/client/index.js'
 	},
 	output: {
-		path: absolutePath('built/client'),
+		path: absolutePath('./src/client.built'),
 		filename: '[name].js'
 	},
+	plugins: [
+		new webpack.ProvidePlugin({ riot: 'riot' }),
+		new UglifyJSPlugin()
+	],
 	module: {
 		rules: [
+			{
+				test: /\.js$|\.tag$/,
+				exclude: /node_modules/,
+				use: 'babel-loader'
+			},
 			{
 				test: /\.tag$/,
-				enforce: 'pre',
 				exclude: /node_modules/,
 				use: [
 					{
 						loader: 'riot-tag-loader',
-						options: {
-							style: 'scss'
-						}
+						options: { style: 'scss' }
 					}
 				]
 			},
 			{
-				test: /\.js$|\.tag$/,
-				exclude: /node_modules/,
+				test: /\.scss$/,
 				use: [
-					{
-						loader: 'babel-loader',
-						options: {}
-					}
+					'style-loader',
+					'css-loader',
+					'sass-loader'
 				]
 			}
 		]
-	},
-	resolve: {
-		extensions: ['*', '.js', '.tag']
-	},
-	plugins: [
-		new webpack.ProvidePlugin({
-			riot: 'riot'
-		})
-	]
+	}
 };