chore(extension): copy using Webpack (#674)

extension/gulpfile.babel.js

@@ -1,6 +1,5 @@
 import gulp from 'gulp';
 import gutil from 'gulp-util';
-import rename from 'gulp-rename';
 import zip from 'gulp-zip';
 import webpack from 'webpack';
 import mocha from 'gulp-mocha';
@@ -9,10 +8,6 @@ import devConfig from './webpack/dev.config';
 import prodConfig from './webpack/prod.config';
 import wrapConfig from './webpack/wrap.config';
 
-function copy(dest) {
-  gulp.src('./src/assets/**/*').pipe(gulp.dest(dest));
-}
-
 /*
  * dev tasks
  */
@@ -27,15 +22,6 @@ gulp.task('webpack:dev', (callback) => {
   callback();
 });
 
-gulp.task('copy:dev', (done) => {
-  gulp
-    .src('./src/browser/extension/manifest.json')
-    .pipe(rename('manifest.json'))
-    .pipe(gulp.dest('./dev'));
-  copy('./dev');
-  done();
-});
-
 /*
  * build tasks
  */
@@ -57,15 +43,6 @@ gulp.task('webpack:build:extension', (callback) => {
     .then(callback);
 });
 
-gulp.task('copy:build:extension', (done) => {
-  gulp
-    .src('./src/browser/extension/manifest.json')
-    .pipe(rename('manifest.json'))
-    .pipe(gulp.dest('./build/extension'));
-  copy('./build/extension');
-  done();
-});
-
 /*
  * compress task
  */
@@ -86,17 +63,6 @@ gulp.task('compress:firefox', (done) => {
   done();
 });
 
-/*
- * watch tasks
- */
-
-gulp.task('copy:watch', () => {
-  gulp.watch(
-    ['./src/browser/extension/manifest.json', './src/assets/**/*'],
-    gulp.series('copy:dev')
-  );
-});
-
 gulp.task('test:chrome', () => {
   crdv.start();
   return gulp
@@ -113,18 +79,15 @@ gulp.task('test:electron', () => {
     .on('end', () => crdv.stop());
 });
 
-gulp.task('default', gulp.parallel('webpack:dev', 'copy:dev', 'copy:watch'));
+gulp.task('default', gulp.parallel('webpack:dev'));
-gulp.task(
+gulp.task('build:extension', gulp.parallel('webpack:build:extension'));
-  'build:extension',
-  gulp.parallel('webpack:build:extension', 'copy:build:extension')
-);
 gulp.task(
   'copy:build:firefox',
   gulp.series('build:extension', (done) => {
     gulp
       .src([
         './build/extension/**',
-        '!./build/extension/redux-devtools-extension.js',
+        '!./build/extension/redux-devtools-extension.bundle.js',
       ])
       .pipe(gulp.dest('./build/firefox'))
       .on('finish', function () {
@@ -132,7 +95,6 @@ gulp.task(
           .src('./src/browser/firefox/manifest.json')
           .pipe(gulp.dest('./build/firefox'));
       });
-    copy('./build/firefox');
     done();
   })
 );

extension/package.json

@@ -43,6 +43,7 @@
     "babel-loader": "^8.1.0",
     "chromedriver": "^2.35.0",
     "co-mocha": "^1.1.3",
+    "copy-webpack-plugin": "^6.3.1",
     "cross-env": "^1.0.8",
     "electron": "^2.0.2",
     "enzyme": "^2.3.0",
@@ -54,7 +55,6 @@
     "gitbook-cli": "^2.3.0",
     "gulp": "^4.0.2",
     "gulp-mocha": "^3.0.1",
-    "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.7",
     "gulp-zip": "^3.0.2",
     "jsdom": "^9.8.3",
@@ -68,7 +68,7 @@
     "selenium-webdriver": "^3.0.1",
     "sinon-chrome": "^1.1.2",
     "style-loader": "^0.18.2",
-    "webpack": "^4.27.1"
+    "webpack": "^4.44.1"
   },
   "dependencies": {
     "jsan": "^3.1.13",

extension/webpack/base.config.js

@@ -1,6 +1,7 @@
 import path from 'path';
 import webpack from 'webpack';
 import TerserPlugin from 'terser-webpack-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
 
 const extpath = path.join(__dirname, '../src/browser/extension/');
 const mock = `${extpath}chromeAPIMock.js`;
@@ -37,7 +38,22 @@ const baseConfig = (params) => ({
           new webpack.optimize.ModuleConcatenationPlugin(),
           new webpack.optimize.OccurrenceOrderPlugin(),
         ]),
+  ].concat(
+    params.copy
+      ? new CopyPlugin({
+          patterns: [
+            {
+              from: `${extpath}manifest.json`,
+              to: path.join(params.output.path, 'manifest.json'),
+            },
+            {
+              from: path.join(__dirname, '../src/assets/'),
+              to: params.output.path,
+            },
           ],
+        })
+      : []
+  ),
   optimization: {
     minimizer: [
       new TerserPlugin({

extension/webpack/dev.config.js

@@ -13,6 +13,7 @@ let config = baseConfig({
     },
   },
   plugins: [new webpack.NoEmitOnErrorsPlugin()],
+  copy: true,
 });
 
 config.watch = true;

extension/webpack/prod.config.js

@@ -8,4 +8,5 @@ export default baseConfig({
       NODE_ENV: '"production"',
     },
   },
+  copy: true,
 });