feat: webpack refactor

.eslintrc.yml

@@ -5,7 +5,9 @@ env:
   node: true
   jest: true
 parserOptions:
+  parser: babel-eslint
   ecmaVersion: 2017
+  allowImportExportEverywhere: true
 globals:
   document: false
   navigator: false

.gitignore

@@ -18,7 +18,8 @@ npm-debug.log*
 # Generated assets
 /assets
 
-# Fusebox
+# Webpack
+.webpack-cache
 .fusebox
 
 # Config Files

dev/webpack/postcss.config.js

@@ -0,0 +1,2 @@
+module.exports = {
+}

dev/webpack/webpack.common.js

@@ -0,0 +1,201 @@
+const path = require('path')
+const fs = require('fs-extra')
+const webpack = require('webpack')
+
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
+
+module.exports = {
+  entry: './client/index.js',
+  output: {
+    path: path.join(process.cwd(), 'assets'),
+    pathinfo: true,
+    filename: 'js/[name].js',
+    chunkFilename: 'js/[name].chunk.js',
+    publicPath: '/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'cache-loader',
+            options: {
+              cacheDirectory: '.webpack-cache'
+            }
+          },
+          {
+            loader: 'babel-loader',
+            options: {
+              ...babelConfig,
+              cacheDirectory: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              autoprefixer: false,
+              sourceMap: false,
+              minimize: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                autoprefixer: false,
+                sourceMap: false,
+                minimize: true
+              }
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: false
+              }
+            }
+          ]
+        })
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: [
+              {
+                loader: 'vue-style-loader'
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  autoprefixer: false,
+                  sourceMap: false,
+                  minimize: true
+                }
+              }
+            ],
+            scss: [
+              {
+                loader: 'vue-style-loader'
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  autoprefixer: false,
+                  sourceMap: false,
+                  minimize: true
+                }
+              },
+              {
+                loader: 'sass-loader',
+                options: {
+                  sourceMap: false
+                }
+              },
+              {
+                loader: 'sass-resources-loader',
+                options: {
+                  resources: path.join(process.cwd(), '/client/scss/global.scss')
+                }
+              }
+            ],
+            js: {
+              loader: 'babel-loader',
+              options: {
+                babelrc: path.join(process.cwd(), '.babelrc'),
+                cacheDirectory: true
+              }
+            }
+          }
+        }
+      },
+      {
+        test: /\.(png|jpg|gif)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192
+            }
+          }
+        ]
+      },
+      {
+        test: /\.svg$/,
+        exclude: [
+          path.join(process.cwd(), 'client/svg')
+        ],
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'svg/'
+            }
+          }
+        ]
+      },
+      {
+        test: /\.svg$/,
+        include: [
+          path.join(process.cwd(), 'client/svg')
+        ],
+        use: [
+          {
+            loader: 'raw-loader'
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin({
+      width: 72,
+      complete: '▇',
+      incomplete: '-'
+    }),
+    new webpack.BannerPlugin('Wiki.js - wiki.js.org - Licensed under AGPL'),
+    new CopyWebpackPlugin([
+      { from: 'client/static' }
+    ], {
+
+    }),
+    new ExtractTextPlugin('css/bundle.css')
+  ],
+  resolve: {
+    symlinks: true,
+    alias: {
+      '@': path.join(process.cwd(), 'client'),
+      'vue$': 'vue/dist/vue.common.js'
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.vue'
+    ],
+    modules: [
+      'node_modules'
+    ]
+  },
+  target: 'web'
+}

dev/webpack/webpack.dev.js

@@ -0,0 +1,16 @@
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  module: {
+    rules: []
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development')
+    })
+  ],
+  resolve: {}
+})

dev/webpack/webpack.prod.js

@@ -0,0 +1,22 @@
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+
+const CleanWebpackPlugin = require('clean-webpack-plugin')
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
+
+const common = require('./webpack.common.js')
+
+console.info(process.cwd())
+
+module.exports = merge(common, {
+  module: {
+    rules: []
+  },
+  plugins: [
+    new CleanWebpackPlugin(['assets'], { root: process.cwd() }),
+    new UglifyJSPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ]
+})

package.json

@@ -7,7 +7,7 @@
     "start": "node wiki start",
     "stop": "node wiki stop",
     "restart": "node wiki restart",
-    "build": "poi build",
+    "build": "webpack --config dev/webpack/webpack.prod.js",
     "build:analyze": "poi build --analyze",
     "dev:client": "poi watch",
     "dev:server": "nodemon",
@@ -144,13 +144,19 @@
     "autoprefixer": "7.2.3",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
+    "babel-eslint": "8.2.1",
     "babel-jest": "22.0.4",
+    "babel-loader": "7.1.2",
     "babel-preset-env": "1.6.1",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
     "brace": "0.11.0",
+    "cache-loader": "1.2.0",
+    "clean-webpack-plugin": "0.1.17",
     "colors": "1.1.2",
     "consolidate": "0.15.0",
+    "copy-webpack-plugin": "4.3.1",
+    "css-loader": "0.28.9",
     "eslint": "4.13.1",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "11.0.0-beta.0",
@@ -159,7 +165,8 @@
     "eslint-plugin-promise": "3.6.0",
     "eslint-plugin-standard": "3.0.1",
     "eslint-plugin-vue": "3.13.1",
-    "fuse-box": "2.5.0-beta.1",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.6",
     "graphql-tag": "^2.6.1",
     "i18next-xhr-backend": "1.5.0",
     "intl": "1.2.5",
@@ -169,20 +176,23 @@
     "node-dev": "3.1.3",
     "node-sass": "4.7.2",
     "nodemon": "1.14.3",
-    "poi": "9.6.12",
     "postcss-selector-parser": "3.1.1",
+    "progress-bar-webpack-plugin": "1.10.0",
     "pug-lint": "2.5.0",
     "raw-loader": "0.5.1",
     "sass-loader": "6.0.6",
     "sass-resources-loader": "1.3.1",
+    "style-loader": "0.19.1",
     "svg-sprite-loader": "3.6.2",
     "twemoji-awesome": "1.0.6",
     "typescript": "2.6.2",
     "uglify-es": "3.2.2",
+    "uglifyjs-webpack-plugin": "1.1.6",
     "vee-validate": "2.0.0-rc.27",
     "vue": "2.5.13",
     "vue-clipboards": "1.2.0",
     "vue-hot-reload-api": "2.2.4",
+    "vue-loader": "13.7.0",
     "vue-lodash": "1.0.4",
     "vue-material": "^0.8.1",
     "vue-resource": "1.3.5",
@@ -191,7 +201,9 @@
     "vue-template-es2015-compiler": "1.6.0",
     "vuex": "3.0.1",
     "vuex-persistedstate": "2.4.2",
+    "webpack": "3.10.0",
     "webpack-bundle-analyzer": "2.9.2",
+    "webpack-merge": "4.1.1",
     "whatwg-fetch": "2.0.3"
   },
   "jest": {

poi.config.js

@@ -1,83 +0,0 @@
-const path = require('path')
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
-// const _ = require('lodash')
-// const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
-
-module.exports = options => ({
-  entry: 'client/index.js',
-  dist: 'assets',
-  staticFolder: 'client/static',
-  filename: {
-    js: 'js/[name].js',
-    css: 'css/bundle.css',
-    images: 'images/[name].[ext]',
-    fonts: 'fonts/[name].[ext]',
-    chunk: 'js/[name].chunk.js'
-  },
-  autoprefixer: {
-    browsers: [
-      'last 6 Chrome major versions',
-      'last 6 Firefox major versions',
-      'last 4 Safari major versions',
-      'last 4 Edge major versions',
-      'last 3 iOS major versions',
-      'last 3 Android major versions',
-      'last 2 ChromeAndroid major versions',
-      'Explorer 11'
-    ]
-  },
-  html: false,
-  hash: false,
-  sourceMap: false,
-  extendWebpack (config) {
-    // Vue - Default SCSS Imports
-    config.module.rule('vue')
-      .use('vue-loader')
-      .tap(opts => {
-        opts.loaders.scss.push({
-          loader: 'sass-resources-loader',
-          options: {
-            resources: path.join(__dirname, './client/scss/global.scss')
-          }
-        })
-        return opts
-      })
-
-    // SVG Loader
-    config.module.rule('svg')
-      .exclude.add(path.join(__dirname, './client/svg')).end()
-      .use('file-loader')
-      .tap(opts => {
-        opts.name = '[name].[ext]'
-        opts.outputPath = 'svg/'
-        return opts
-      })
-    config.module.rule('svgSymbols')
-      .include.add(path.join(__dirname, './client/svg')).end()
-      .use('raw-loader')
-      .loader('raw-loader')
-
-    // config.module.rule('svg').uses.delete('file-loader')
-    // config.module.rule('svg')
-    //   .use('svg-sprite-loader')
-    //   .loader('svg-sprite-loader', {
-    //     extract: true,
-    //     spriteFilename: 'svg/symbols.svg'
-    //   })
-    // config.plugin('svg-sprite-loader')
-    //   .use(SpriteLoaderPlugin)
-
-    // Vue with Compiler Alias
-    config.resolve.alias.set('vue$', 'vue/dist/vue.common.js')
-
-    // Bundle Analyze
-    if (options.analyze) {
-      config.plugin('analyzer').use(BundleAnalyzerPlugin, [{
-        analyzerMode: 'static'
-      }])
-    }
-  },
-  webpack (config) {
-    return config
-  }
-})