moves most config to webpack and enables purgecss for prod builds

LexiccLabs · Nov 21, 2019 · 049f932 · 049f932
1 parent e52ab27
commit 049f932
Show file tree

Hide file tree

Showing 8 changed files with 225 additions and 191 deletions.
diff --git a/package.json b/package.json
@@ -2,10 +2,9 @@
   "name": "aepp-boilerplate",
   "version": "0.1.0",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack -p --env.NODE_ENV=prod",
-    "dev": "webpack-dev-server --env.NODE_ENV=dev --config ./webpack.config.js",
-    "build:stats": "webpack --env.NODE_ENV=prod --profile --json > stats.json"
+    "build": "webpack --config ./webpack.prod.js --progress",
+    "dev": "webpack-dev-server --config ./webpack.dev.js --verbose --progress",
+    "build:stats": "webpack --config ./webpack.prod.js  --profile --json > stats.json"
   },
   "license": "ISC",
   "dependencies": {
@@ -36,6 +35,7 @@
     "core-js": "^3.2.1",
     "css-loader": "^3.0.0",
     "cssnano": "^4.1.10",
+    "favicons-webpack-plugin": "^1.0.2",
     "file-loader": "^4.0.0",
     "glob-all": "^3.1.0",
     "html-webpack-harddisk-plugin": "^1.0.1",
@@ -55,7 +55,7 @@
     "webpack-bundle-analyzer": "^3.5.0",
     "webpack-cli": "^3.3.8",
     "webpack-dev-server": "^3.7.2",
-    "webpack-pwa-manifest": "^4.0.0",
+    "webpack-merge": "^4.2.2",
     "webpack-serve": "^3.1.0"
   },
   "browserslist": [

diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/webpack.common.js b/webpack.common.js
@@ -0,0 +1,121 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
+// Cleans dist folder before building for fresh build
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const {VueLoaderPlugin} = require('vue-loader');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+
+const distFolder = path.resolve(__dirname, 'dist');
+
+module.exports = {
+  resolve: {
+    extensions: ['.vue', '.css', '.js'],
+    alias: {
+      '~': path.resolve(__dirname, 'src')
+    }
+  },
+  node: {
+    fs: 'empty'
+  },
+  entry: {
+    'main': path.resolve(__dirname, 'src/main.js')
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      inject: true,
+      // chunks: ['main'],
+      title: 'Example Aepp',
+      template: './src/index.html',
+      filename: distFolder + '/index.html',
+      // Avoids building twice for dev
+      alwaysWriteToDisk: true
+    }),
+    new HtmlWebpackHarddiskPlugin(),
+    new CleanWebpackPlugin(),
+    new VueLoaderPlugin(),
+    new FaviconsWebpackPlugin({
+      logo: path.resolve(__dirname, 'src/assets/logo.svg'),
+      mode: 'webapp', // optional can be 'webapp' or 'light' - 'webapp' by default
+      devMode: 'webapp', // optional can be 'webapp' or 'light' - 'light' by default
+      publicPath: '/',
+      favicons: {
+        start_url: '/',
+        appName: 'Example Aepp',
+        appDescription: 'Example Description.',
+        developerName: 'Aeternity Developers',
+        developerURL: 'https://github.com/kenodressel/aepp-boilerplate',
+        background: '#ff0d6a',
+        theme_color: '#ff0d6a',
+        icons: {
+          coast: false,
+          yandex: false,
+          windows: false
+        }
+      }
+    })
+  ],
+  module: {
+    rules: [
+      // this will apply to both plain `.js` files
+      // AND `<script>` blocks in `.vue` files
+      {
+        test: /\.js$/,
+        include: [
+          path.resolve(__dirname, "src"),
+          path.resolve(__dirname, "node_modules/@aeternity"),
+          path.resolve(__dirname, "node_modules/rlp"),
+          // Contains "const" or "let"
+          path.resolve(__dirname, "node_modules/base-x"),
+        ],
+        loader: 'babel-loader'
+      },
+      {
+        type: 'javascript/auto',
+        test: /\.mjs$/,
+        include: [
+          path.resolve(__dirname, "node_modules/@download/blockies")
+        ],
+        loader: 'babel-loader'
+      },
+      // allows vue compoents in '<template><html><script><style>' syntax
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            js: 'babel-loader!standard-loader?error=true'
+          }
+          // extractCSS: true
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader', // translates CSS into CommonJS
+          'sass-loader' // compiles Sass to CSS, using Node Sass by default
+        ]
+      },
+      {
+        test: /\.aes$/,
+        use: [
+          'raw-loader',
+        ]
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg|png)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [{
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: './assets/'
+          }
+        }]
+      }
+    ]
+  }
+};
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -0,0 +1,43 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+const path = require('path');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'eval-source-map',
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    port: 8081,
+    historyApiFallback: true,
+    disableHostCheck: true,
+    host: '0.0.0.0'
+  },
+
+  output: {
+    filename: 'bundle.js?[hash]',
+    publicPath: '/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: [
+                require('postcss-import'),
+                require('tailwindcss'),
+                require('autoprefixer'),
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  }
+});