Upgrade to webpack v2 (#93)

* Remove multiple webpack configs * Upgrade webpack to v2, migrate config, update loaders * Update npm scripts * Add webpack support for fonts * Fix png/svg image loading
djenriquez · Apr 13, 2017 · b815157 · b815157
1 parent c6aebf5
commit b815157
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 106 deletions.
diff --git a/index.desktop.html b/index.desktop.html
@@ -15,6 +15,6 @@
     </head>
     <body>
         <div id="app"></div>
-        <script src="dist/desktopbundle.js"></script>
+        <script src="dist/electron-bundle.js"></script>
     </body>
 </html>
diff --git a/index.web.html b/index.web.html
@@ -15,6 +15,6 @@
     </head>
     <body>
         <div id="app"></div>
-        <script src="/dist/bundle.js"></script>
+        <script src="/dist/web-bundle.js"></script>
     </body>
 </html>
diff --git a/package.json b/package.json
@@ -3,13 +3,17 @@
   "version": "2.1.0",
   "description": "Graphical interface for Hashicorp Vault",
   "main": "main.js",
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
   "scripts": {
     "lint": "eslint .",
     "dist": "build",
     "serve": "nodemon ./server.js",
-    "dev-pack": "webpack --config webpack/webpack.dev.config.js -w",
-    "build-desktop": "cross-env NODE_ENV=production webpack --config webpack/webpack.desktop.config.js --profile",
-    "build-web": "cross-env NODE_ENV=production webpack --config webpack/webpack.web.config.js --profile",
+    "dev-pack": "webpack -d --env.target=web --hide-modules -w",
+    "build-desktop": "webpack -p --env.target=electron --hide-modules",
+    "build-web": "webpack -p --env.target=web --hide-modules",
     "desktop": "npm run build-desktop && electron .",
     "package-mac": "npm run build-desktop && build --mac=zip --ia32 --x64 --publish never",
     "package-win32": "npm run build-desktop && build --win=nsis --ia32 --x64 --publish never",
@@ -42,35 +46,35 @@
     "autoprefixer": "^6.5.3",
     "babel-core": "^6.18.2",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.7",
+    "babel-loader": "^6.4.1",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-2": "^6.18.0",
     "copy-to-clipboard": "^3.0.5",
     "cross-env": "^3.1.4",
-    "css-loader": "^0.25.0",
+    "css-loader": "^0.28.0",
     "electron": "^1.4.1",
     "electron-builder": "^13.3.2",
     "eslint": "^3.14.0",
     "eslint-plugin-react": "^6.10.3",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
     "flexboxgrid": "^6.3.1",
     "hcl-to-json": "0.0.4",
     "immutability-helper": "^2.1.2",
-    "json-loader": "^0.5.4",
     "jsoneditor": "^5.5.11",
     "lodash": "^4.16.6",
     "material-ui": "^0.16.7",
     "mui-icons": "^1.2.1",
-    "postcss-loader": "^1.1.0",
+    "postcss-loader": "^1.3.3",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
     "react-router": "^3.0.0",
     "react-tap-event-plugin": "^2.0.0",
     "react-ultimate-pagination-material-ui": "^0.5.0",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.13.3"
+    "style-loader": "^0.16.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.3.3"
   },
   "dependencies": {
     "axios": "^0.16.1",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,66 @@
+var webpack = require('webpack');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var path = require('path');
+
+module.exports = function (env) {
+    let buildfor = (env && env.target) ? env.target : "web";
+
+    return {
+        target: buildfor,
+        entry: {
+            common: './app/App.jsx'
+        },
+        resolve: {
+            modules: [
+                "node_modules"
+            ],
+            extensions: ['.js', '.jsx']
+        },
+        output: {
+            path: path.resolve(__dirname, './dist'),
+            publicPath: '/dist/',
+            filename: buildfor + '-bundle.js'
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.jsx?$/,
+                    use: ['babel-loader?cacheDirectory=true']
+                },
+                {
+                    test: /\.css$/,
+                    use: ExtractTextPlugin.extract({
+                        fallback: 'style-loader',
+                        use: ['css-loader?modules=true&localIdentName=[path][name]__[local]--[hash:base64:5]', 'postcss-loader']
+                    }),
+                    include: path.resolve(__dirname, './app')
+                },
+                {
+                    test: /\.css$/,
+                    use: ExtractTextPlugin.extract({
+                        fallback: 'style-loader',
+                        use: ['css-loader', 'postcss-loader']
+                    }),
+                    include: path.resolve(__dirname, './node_modules')
+                },
+                {
+                    test: /\.ico$/,
+                    use: ['file-loader?name=[name].[ext]']
+                },
+                {
+                    test: /\.(svg|png)$/,
+                    use: ['file-loader']
+                },
+                {
+                    test: /\.(ttf|eot|woff(2)?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                    use: ["file-loader"]
+                },
+            ]
+        },
+        plugins: [
+            new ExtractTextPlugin("styles.css"),
+            new webpack.IgnorePlugin(/regenerator|nodent|js-beautify/, /ajv/),
+            new webpack.DefinePlugin({ WEBPACK_DEF_TARGET_WEB: (buildfor == "web") })
+        ]
+    }
+};
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
diff --git a/webpack/webpack.desktop.config.js b/webpack/webpack.desktop.config.js
diff --git a/webpack/webpack.dev.config.js b/webpack/webpack.dev.config.js
diff --git a/webpack/webpack.min.config.js b/webpack/webpack.min.config.js
diff --git a/webpack/webpack.web.config.js b/webpack/webpack.web.config.js