build: use poi to build files, so we can handle css in js now 🙌

Author: fengzilong

lib/material.min.css

@@ -4,12 +4,12 @@
   "version": "0.9.3",
   "description": "Regular Developer Tools is a Chrome Extension that allows real-time inspection of [Regular](http://regularjs.github.io/) components.",
   "scripts": {
-    "build": "npm run devtool-build && npm run inject-build",
-    "devtool-build": "bili src/devtools/devtools.js --out-dir dist --name devtools.bundle --format umd --exports none",
-    "inject-build": "bili src/frontend/inject.js --out-dir dist --name inject.bundle --format umd --exports none",
-    "watch": "concurrently \"npm run devtool-watch\" \"npm run inject-watch\"",
-    "devtool-watch": "npm run devtool-build -- --watch",
-    "inject-watch": "npm run inject-build -- --watch",
+    "build": "npm run build:devtools && npm run build:inject",
+    "build:devtools": "poi build --config scripts/devtools.config.js",
+    "build:inject": "poi build --config scripts/devtools.config.js",
+    "watch": "concurrently \"npm run watch:devtools\" \"npm run watch:inject\"",
+    "watch:devtools": "poi watch --config scripts/devtools.config.js",
+    "watch:inject": "poi watch --config scripts/inject.config.js",
     "test": "npm run lint",
     "lint": "eslint src --quiet",
     "precommit": "lint-staged"
@@ -34,7 +34,9 @@
     "eslint-config-google": "^0.6.0",
     "husky": "^0.14.3",
     "lint-staged": "^4.1.3",
+    "material-design-lite": "^1.3.0",
     "mitt": "^1.1.2",
+    "poi": "^9.3.5",
     "regularjs": "0.5.2"
   },
   "dependencies": {}

lib/material.min.js

@@ -0,0 +1,15 @@
+module.exports = {
+    entry: './src/devtools/devtools.js',
+    filename: {
+        js: 'devtools.[name].js'
+    },
+    webpack( config ) {
+        config.output.publicPath = '/dist/';
+        config.resolve.alias[ 'regularjs' ] = require.resolve( 'regularjs/dist/regular.js' );
+        return config;
+    },
+    minimize: true,
+    sourceMap: true,
+    extractCSS: true,
+    vendor: true
+};

package.json

@@ -0,0 +1,10 @@
+module.exports = {
+    entry: './src/frontend/inject.js',
+    filename: {
+        js: 'inject.bundle.js'
+    },
+    minimize: true,
+    sourceMap: true,
+    html: false,
+    vendor: false
+};

scripts/devtools.config.js

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "Roboto";
-  src:url("../../lib/Roboto-Regular.ttf");
+  src:url("./fonts/Roboto-Regular.ttf");
 }
 
 html {
@@ -13,7 +13,7 @@ body {
   font-family: Consolas, Lucida Console, Menlo, monospace, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
 }
 
-.devtools {
+#app {
   box-sizing: border-box;
   padding-top: 60px;
   width: 100%;

scripts/inject.config.js

@@ -1,6 +1,7 @@
 // the real devtools script
 // the UI layer of devtools
 import Regular from "regularjs";
+import 'material-design-lite';
 import CircularJSON from "../shared/circular-json";
 import log from '../shared/log';
 import {enter, input, mouseenter, mouseleave} from './events';
@@ -17,10 +18,11 @@ import {
     syncArr
 } from './utils';
 import agent from './agent';
-
-// components
 import DevtoolsViewComponent from './components/DevtoolsView';
 
+import 'material-design-lite/dist/material.min.css';
+import './devtools.css';
+
 // register custom events
 Regular.use(enter);
 Regular.use(input);

src/devtools/devtools.css

@@ -1,7 +1,7 @@
 // create new panel for devtools
 chrome.devtools.panels.create("Regular",
-    "./assets/regular.png",
-    "./src/devtools/panel.html",
+    "/assets/regular.png",
+    "/dist/index.html",
     function(panel) {
         panel.onShown.addListener(function(extPanelWindow) {
             chrome.devtools.inspectedWindow.eval(