Updated environment

build/webpack.base.conf.js

@@ -3,7 +3,11 @@ const path = require('path')
 module.exports = {
   entry: {
     background: './src/background/main.js',
-    content: './src/content/main.js',
+
+    content: './src/content/page/container.js',
+    selection: './src/content/page/selection-listener.js',
+    panel: './src/content/panel/main.js',
+
     popup: './src/popup/main.js',
     options: './src/options/main.js'
   },
@@ -38,7 +42,6 @@ module.exports = {
   resolve: {
     extensions: ['.*', '.js', '.vue', '.json'],
     alias: {
-      'vue$': 'vue/dist/vue.common.js',
       'test': path.resolve(__dirname, '../test'),
       'src': path.resolve(__dirname, '../src')
     }

build/webpack.prod.conf.js

@@ -19,7 +19,12 @@ var webpackConfig = merge(baseWebpackConfig, {
             }),
             'scss': ExtractTextPlugin.extract({
               fallback: 'vue-style-loader',
-              use: ['css-loader', 'sass-loader']
+              use: ['css-loader', 'postcss-loader', 'sass-loader', {
+                loader: 'sass-resources-loader',
+                options: {
+                  resources: ['src/sass-global/**/*.scss']
+                }
+              }]
             })
           }
         }
@@ -40,7 +45,12 @@ var webpackConfig = merge(baseWebpackConfig, {
         test: /\.scss$/,
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
-          use: ['css-loader', 'postcss-loader', 'sass-loader']
+          use: ['css-loader', 'postcss-loader', 'sass-loader', {
+            loader: 'sass-resources-loader',
+            options: {
+              resources: ['src/sass-global/**/*.scss']
+            }
+          }]
         })
       }
     ]
@@ -85,6 +95,18 @@ webpackConfig = merge(webpackConfig, {
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency'
     }),
+    new HtmlWebpackPlugin({
+      filename: 'panel.html',
+      template: 'src/template.html',
+      chunks: ['panel'],
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+      },
+      chunksSortMode: 'dependency'
+    }),
     new HtmlWebpackPlugin({
       filename: 'options.html',
       template: 'src/template.html',

package.json

@@ -60,6 +60,7 @@
     "postcss": "^5.2.12",
     "postcss-loader": "^1.3.2",
     "sass-loader": "^5.0.1",
+    "sass-resources-loader": "^1.2.0",
     "sinon": "^1.17.7",
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.1",
@@ -70,9 +71,10 @@
     "webpack": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.17.0",
-    "webpack-merge": "^2.6.1"
+    "webpack-merge": "^2.6.1",
   },
   "dependencies": {
+    "highcharts": "^5.0.9",
     "vue": "^2.2.4",
     "vuex": "^2.2.1"
   }

postcss.config.js

@@ -1,7 +1,7 @@
-module.exports = {
+module.exports = () => ({
   plugins: [
     require('autoprefixer')({
-      browsers: ['Chrome']
+      browsers: ['Chrome >= 45']
     })
   ]
-}
+})

src/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "chrome": true
+  }
+}