Refactored build pipeline to take advantage of vue's pages config

Author: adambullmer

generator/index.js

@@ -19,6 +19,14 @@ module.exports = (api, options) => {
       'vuex': '^3.0.1'
     }
   }
+  const renderConfig = {
+    pages: {
+      'popup/popup': {
+        entry: 'src/popup/popup.js',
+        title: 'Popup'
+      }
+    }
+  }
 
   if (api.hasPlugin('eslint')) {
     console.log('Adding eslint config stuffs')
@@ -30,8 +38,17 @@ module.exports = (api, options) => {
 
   if (options.optionsPage) {
     api.render('./template/options', { ...options })
+
+    renderConfig.pages['options/options'] = {
+      entry: 'src/options/options.js',
+      title: 'Options'
+    }
   }
 
+  api.render((files) => {
+    files['vue.config.js'] = api.genJSConfig(renderConfig)
+  })
+
   api.onCreateComplete(() => {
     const gitignore = fs.readFileSync(api.resolve('./.gitignore'), 'utf8')
     fs.writeFileSync(api.resolve('./.gitignore'), gitignore + gitignoreSnippet)

index.js

@@ -5,7 +5,6 @@ const logger = 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 HtmlWebpackPlugin = require('html-webpack-plugin')
 const ZipPlugin = require('zip-webpack-plugin')
 
 const appRootPath = process.cwd()
@@ -16,7 +15,6 @@ module.exports = (api) => {
   const isProduction = api.service.mode === 'production'
   const outputDir = api.resolve(api.service.projectOptions.outputDir || 'dist')
   const packageScript = isProduction ? null : 'remove-evals.js'
-  const hasOptionsPageEntry = fs.existsSync(api.resolve('./src/options/options.js'))
   const hasKeyFile = fs.existsSync(api.resolve('key.pem'))
 
   api.configureWebpack((webpackConfig) => {
@@ -25,11 +23,6 @@ module.exports = (api) => {
 
     delete webpackConfig.entry.app
     webpackConfig.entry.background = './src/background.js'
-    webpackConfig.entry['popup/popup'] = './src/popup/popup.js'
-
-    if (hasOptionsPageEntry) {
-      webpackConfig.entry['options/options'] = './src/options/options.js'
-    }
 
     if (isProduction) {
       if (hasKeyFile) {
@@ -81,30 +74,6 @@ 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']
-    }))
-
-    if (hasOptionsPageEntry) {
-      webpackConfig.plugins.push(new HtmlWebpackPlugin({
-        title: name,
-        hash: true,
-        cache: true,
-        inject: 'body',
-        filename: './options/options.html',
-        template: './src/options/options.html',
-        appMountId: 'app',
-        chunks: ['options/options', 'chunk-vendors']
-      }))
-    }
-
     if (packageScript === null) {
       webpackConfig.plugins.push(new ZipPlugin({
         path: api.resolve(`${api.service.projectOptions.outputDir || 'dist'}-zip`),

package.json

@@ -26,7 +26,6 @@
   "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",