Webpack@4 + mini-css-extract-plugin

package.json

@@ -4,10 +4,8 @@
   "version": "0.0.0",
   "license": "apache-2.0",
   "scripts": {
-    "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
+    "start": "webpack-dev-server --hot",
-    "build": "preact build",
+    "build": "webpack -p",
-    "serve": "preact build && preact serve",
-    "dev": "preact watch",
     "lint": "eslint src"
   },
   "eslintConfig": {
@@ -20,21 +18,36 @@
     "build/*"
   ],
   "devDependencies": {
+    "awesome-typescript-loader": "^4.0.1",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-jsx-pragmatic": "^1.0.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-constant-elements": "^6.23.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
+    "babel-preset-env": "^1.6.1",
+    "css-loader": "^0.28.10",
     "eslint": "^4.18.2",
     "eslint-config-developit": "^1.1.1",
+    "html-webpack-plugin": "^3.0.6",
     "if-env": "^1.0.4",
+    "mini-css-extract-plugin": "^0.2.0",
     "node-sass": "^4.7.2",
-    "preact-cli": "^2.2.1",
+    "sass-loader": "^6.0.7",
-    "sass-loader": "^6.0.6"
+    "typescript-loader": "^1.1.3",
+    "webpack": "^4.1.1",
+    "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.0"
   },
   "dependencies": {
     "material-components-web": "^0.31.0",
     "material-radial-progress": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git",
     "preact": "^8.2.7",
-    "preact-compat": "^3.18.0",
     "preact-i18n": "^1.2.0",
     "preact-material-components": "^1.3.7",
-    "preact-material-components-drawer": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git",
     "preact-router": "^2.6.0"
   }
 }

webpack.config.js

@@ -0,0 +1,78 @@
+let path = require('path');
+let webpack = require('webpack');
+let MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = function(_, env) {
+	return {
+		mode: env.mode || 'development',
+		entry: './src/index',
+		resolve: {
+			extensions: ['.ts', '.js', '.scss', '.css'],
+			alias: {
+				style: path.join(__dirname, 'src/style')
+			}
+		},
+		module: {
+			rules: [
+				{
+					test: /\.s?css$/,
+					use: [
+						MiniCssExtractPlugin.loader,
+						{ loader: 'css-loader' },
+						// 'sass-loader?includePaths='+encodeURIComponent(path.join(__dirname, 'node_modules'))
+						{
+							loader: 'sass-loader',
+							options: {
+								includePaths: [path.join(__dirname, 'node_modules')]
+							}
+						}
+					]
+				},
+				{
+					test: /\.ts$/,
+					// loader: 'awesome-typescript-loader'
+					loader: 'typescript-loader'
+				},
+				{
+					test: /\.js$/,
+					loader: 'babel-loader',
+					options: {
+						presets: [
+							['env', {
+								loose: true,
+								uglify: true,
+								modules: false,
+								targets: {
+									browsers: 'last 2 versions'
+								},
+								exclude: [
+									'transform-regenerator',
+									'transform-es2015-typeof-symbol'
+								]
+							}]
+						],
+						plugins: [
+							'syntax-dynamic-import',
+							'transform-decorators-legacy',
+							'transform-class-properties',
+							'transform-object-rest-spread',
+							'transform-react-constant-elements',
+							'transform-react-remove-prop-types',
+							['transform-react-jsx', {
+								pragma: 'h'
+							}],
+							['jsx-pragmatic', {
+								module: 'preact',
+								export: 'h',
+								import: 'h'
+							}]
+						]
+					}
+				}
+			]
+		},
+		plugins: [
+			new webpack.optimize.SplitChunksPlugin({})
+		]
+	};
+};