Merge pull request #80 from Kocal/feature/ISSUE-79

Upgrade webpack to version 4
Kocal · Mar 7, 2018 · b973014 · b973014
2 parents 725dae1 + 75886c6
commit b973014
Show file tree

Hide file tree

Showing 6 changed files with 1,735 additions and 259 deletions.
diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -31,7 +31,7 @@
     "copy-webpack-plugin": "^4.5.0",
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.10",
-    "extract-text-webpack-plugin": "^3.0.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
     "jest": "^22.4.2",
     "jest-localstorage-mock": "^2.2.0",
@@ -40,12 +40,12 @@
     "node-sass": "^4.7.2",
     "sass-loader": "^6.0.7",
     "ts-jest": "^22.4.1",
-    "ts-loader": "^3.5.0",
+    "ts-loader": "^4.0.1",
     "typescript": "^2.7.2",
-    "uglifyjs-webpack-plugin": "^1.2.2",
     "vue-loader": "^14.1.1",
     "vue-template-compiler": "^2.5.13",
-    "webpack": "^3.11.0",
+    "webpack": "^4.1.0",
+    "webpack-cli": "^2.0.10",
     "webpack-shell-plugin": "^0.5.0",
     "zip-folder": "^1.0.0"
   }

diff --git a/packages/extension/scripts/remove-evals.js b/packages/extension/scripts/remove-evals.js
@@ -4,15 +4,12 @@ const path = require('path');
 const fs = require('fs');
 
 const BUNDLE_DIR = path.join(__dirname, '../dist');
-const bundles = [
-  'background.js',
-  'popup/popup.js',
-];
+const bundles = ['vendor.js', 'background.js', 'popup/popup.js'];
 
 const evalRegexForProduction = /;([a-z])=function\(\){return this}\(\);try{\1=\1\|\|Function\("return this"\)\(\)\|\|\(0,eval\)\("this"\)}catch\(t\){"object"==typeof window&&\(\1=window\)}/g;
 const evalRegexForDevelopment = /;\s*\/\/ This works in non-strict mode\s*([a-z])\s*=\s*\(\s*function\(\)\s*\{\s*return this;\s*}\)\(\);\s*try\s*{\s*\/\/\s*This works if eval is allowed(?:\s*|.+){1,14}/g;
 
-const removeEvals = (file) => {
+const removeEvals = file => {
   console.info(`Removing eval() from ${file}`);
 
   return new Promise((resolve, reject) => {
@@ -31,7 +28,7 @@ const removeEvals = (file) => {
 
       data = data.replace(regex, '=window;');
 
-      fs.writeFile(file, data, (err) => {
+      fs.writeFile(file, data, err => {
         if (err) {
           reject(err);
           return;
@@ -44,7 +41,7 @@ const removeEvals = (file) => {
 };
 
 const main = () => {
-  bundles.forEach((bundle) => {
+  bundles.forEach(bundle => {
     removeEvals(path.join(BUNDLE_DIR, bundle))
       .then(() => console.info(`Bundle ${bundle}: OK`))
       .catch(console.error);

diff --git a/packages/extension/src/manifest.json b/packages/extension/src/manifest.json
@@ -3,11 +3,7 @@
   "version": null,
   "description": "Extension navigateur pour la WebTV Solary",
   "manifest_version": 2,
-  "permissions": [
-    "notifications",
-    "tabs",
-    "https://www.solary.fr/"
-  ],
+  "permissions": ["notifications", "tabs", "https://www.solary.fr/"],
   "icons": {
     "48": "icons/icon_48.png",
     "128": "icons/icon_128.png"
@@ -18,8 +14,6 @@
     "default_icon": "icons/icon_48.png"
   },
   "background": {
-    "scripts": [
-      "background.js"
-    ]
+    "scripts": ["vendor.js", "background.js"]
   }
 }
diff --git a/packages/extension/src/popup/popup.html b/packages/extension/src/popup/popup.html
@@ -9,6 +9,7 @@
 <div id="app">
 
 </div>
+<script src="../vendor.js"></script>
 <script src="popup.js"></script>
 </body>
 </html>
diff --git a/packages/extension/webpack.config.js b/packages/extension/webpack.config.js
@@ -3,10 +3,10 @@ const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const WebpackShellPlugin = require('webpack-shell-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const WebpackUglifyPlugin = require('uglifyjs-webpack-plugin');
 const { version } = require('../../lerna.json');
 
 const config = {
+  mode: 'development',
   context: `${__dirname}/src`,
   entry: {
     background: './background.ts',
@@ -19,8 +19,15 @@ const config = {
   resolve: {
     extensions: ['.ts', '.js', '.vue'],
   },
+  optimization: {
+    runtimeChunk: false,
+    splitChunks: {
+      chunks: 'all',
+      name: 'vendor',
+    },
+  },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.vue$/,
         loaders: 'vue-loader',
@@ -37,11 +44,6 @@ const config = {
           },
         },
       },
-      // {
-      //   test: /\.js$/,
-      //   loader: 'babel-loader',
-      //   exclude: /node_modules/,
-      // },
       {
         test: /\.tsx?$/,
         loader: 'ts-loader',
@@ -100,23 +102,10 @@ if (process.env.NODE_ENV === 'production') {
   const gitRevision = exec('git rev-parse --abbrev-ref HEAD');
   const gitBranchOrTag = gitRevision === 'HEAD' ? exec('git describe --tags --abbrev=0') : gitRevision;
 
-  console.log({
-    gitRevision,
-    gitBranchOrTag,
-  });
-
+  config.mode = 'production';
   config.devtool = '#cheap-module-source-map';
 
   config.plugins = (config.plugins || []).concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"',
-      },
-    }),
-    new WebpackUglifyPlugin({
-      parallel: true,
-      sourceMap: true,
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: true,
     }),