Fixing production builds and manifest asset matching.

adambullmer · adambullmer · commit 64e323426377 · 2018-07-12T14:16:15.000-05:00
- Disabling most of the hash inclusions in file names in favor of hashed URL params
diff --git a/generator/template/src/manifest.json b/generator/template/src/manifest.json
@@ -9,7 +9,7 @@
   "homepage_url": "http://localhost/",
   "description": "A Vue Browser Extension",
   "version": "1.0",
-  "permissions": ["activeTab", "http://*/*", "https://*/*"],
+  "permissions": ["<all_urls>", "*://*/*"],
   "background": {
     "scripts": ["background.js"],
     "persistent": false
diff --git a/generator/template/src/popup/popup.html b/generator/template/src/popup/popup.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <title><%- rootOptions.projectName %></title>
+  <title><%= htmlWebpackPlugin.options.title %></title>
   <link rel="stylesheet" href="popup.css">
 </head>
 <body>
diff --git a/index.js b/index.js
@@ -3,17 +3,20 @@ const { log } = require('@vue/cli-shared-utils')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ChromeExtensionReloader = require('webpack-chrome-extension-reloader')
 const WebpackShellPlugin = require('webpack-shell-plugin-next')
-const { version } = require('./package.json')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { name, version } = require('./package.json')
 
 module.exports = (api) => {
   api.configureWebpack(webpackConfig => {
+    webpackConfig.output.filename = '[name].js'
+    webpackConfig.output.chunkFilename = 'js/[id].[name].js?[hash:8]'
+
     delete webpackConfig.entry.app
     webpackConfig.entry.background = './src/background.js'
     webpackConfig.entry['popup/popup'] = './src/popup/popup.js'
 
     webpackConfig.plugins.push(new CopyWebpackPlugin([
-      { from: './src/icons', to: 'icons', ignore: ['icon.xcf'] },
-      { from: './src/popup/popup.html', to: 'popup/popup.html' },
+      { from: './src/icons', to: 'icons/[name].[ext]', ignore: ['icon.xcf'] },
       {
         from: './src/manifest.json',
         to: 'manifest.json',
@@ -30,6 +33,17 @@ module.exports = (api) => {
       }
     ]))
 
+    webpackConfig.plugins.push(new HtmlWebpackPlugin({
+      title: name,
+      hash: true,
+      cache: true,
+      inject: 'body',
+      filename: './popup/popup.html',
+      template: './src/popup/popup.html',
+      appMountId: 'app',
+      chunks: ['popup/popup', 'chunk-vendors']
+    }))
+
     const scriptPath = path.join(__dirname, 'scripts/remove-evals.js')
     webpackConfig.plugins.push(new WebpackShellPlugin({
       onBuildExit: {
@@ -39,9 +53,13 @@ module.exports = (api) => {
       }
     }))
 
-    if (process.env.HMR === 'true') {
+    if (process.env.NODE_ENV === 'development') {
       webpackConfig.plugins = (webpackConfig.plugins || []).concat([
-        new ChromeExtensionReloader()
+        new ChromeExtensionReloader({
+          entries: {
+            background: 'background'
+          }
+        })
       ])
     }
   })
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-browser-extension",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Browser extension development plugin for vue-cli 3.0",
   "main": "index.js",
   "scripts": {
@@ -26,6 +26,8 @@
   "dependencies": {
     "@vue/cli-shared-utils": "^3.0.0-rc.3",
     "copy-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.16.0",
     "webpack-chrome-extension-reloader": "^0.8.3",
     "webpack-shell-plugin-next": "https://github.com/adambullmer/webpack-shell-plugin-next.git"
   }
diff --git a/yarn.lock b/yarn.lock
