convert webpack config to prod and dev

.eslintignore

@@ -5,5 +5,4 @@ packages/**/dist/*
 examples/**/build/*
 examples/**/storybook-static/*
 apps/**/bundle/*
-
-examples/sn-react-redux-todo-app/*
+webpack.*

.travis.yml

@@ -35,5 +35,5 @@ jobs:
     - if: type = pull_request
       name: 'Sn app'
       install: yarn && npm install netlify-cli -g
-      script: yarn build && yarn snapp build:webpack
-      after_success: wait-on $SN_BOT_URL -l -t 60000 && netlify deploy --site 94fb346c-b540-40f7-aaaf-21eee2a9c891 --auth $NETLIFY_ACCESS_TOKEN --dir ./apps/sensenet/bundle/assets --message $TRAVIS_PULL_REQUEST
+      script: yarn build && yarn snapp build
+      after_success: wait-on $SN_BOT_URL -l -t 60000 && netlify deploy --site 94fb346c-b540-40f7-aaaf-21eee2a9c891 --auth $NETLIFY_ACCESS_TOKEN --dir ./apps/sensenet/build --message $TRAVIS_PULL_REQUEST

apps/sensenet/.gitignore

@@ -59,4 +59,4 @@ typings/
 
 dist
 temp
-bundle
+build

apps/sensenet/package.json

@@ -15,8 +15,8 @@
   ],
   "scripts": {
     "fix:prettier": "prettier \"{,!(dist|temp|bundle)/**/}*.{ts,tsx}\" --write",
-    "build:webpack": "rimraf bundle && webpack",
-    "start": "webpack-dev-server --progress"
+    "build": "webpack --config webpack.prod.js",
+    "start": "webpack-dev-server --open --progress --config webpack.dev.js"
   },
   "private": true,
   "publishConfig": {
@@ -34,26 +34,25 @@
     "@types/react-router": "^5.1.2",
     "@types/react-router-dom": "^5.1.2",
     "@types/uuid": "^3.4.6",
-    "autoprefixer": "^9.7.1",
-    "awesome-typescript-loader": "^5.2.1",
-    "copy-webpack-plugin": "^5.1.0",
-    "css-loader": "^3.2.0",
-    "file-loader": "^4.2.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.1",
+    "file-loader": "^5.0.2",
+    "fork-ts-checker-webpack-plugin": "^3.1.1",
     "git-revision-webpack-plugin": "^3.0.4",
     "html-webpack-plugin": "^3.2.0",
-    "monaco-editor-webpack-plugin": "^1.7.0",
-    "postcss-flexbugs-fixes": "^4.1.0",
-    "postcss-loader": "^3.0.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "monaco-editor-webpack-plugin": "^1.8.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^1.0.0",
-    "ts-config-webpack-plugin": "^1.4.0",
-    "url-loader": "^2.2.0",
-    "webpack": "^4.41.2",
+    "style-loader": "^1.1.2",
+    "terser-webpack-plugin": "^2.3.1",
+    "url-loader": "^3.0.0",
+    "webpack": "^4.41.5",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0"
+    "webpack-dev-server": "^3.10.1",
+    "webpack-merge": "^4.2.2"
   },
   "dependencies": {
     "@material-ui/core": "^4.6.1",
@@ -75,7 +74,7 @@
     "clsx": "^1.0.4",
     "filesize": "^6.0.1",
     "moment": "^2.24.0",
-    "monaco-editor": "^0.18.1",
+    "monaco-editor": "^0.19.0",
     "react": "^16.11.0",
     "react-autosuggest": "^9.4.3",
     "react-dom": "^16.11.0",

apps/sensenet/webpack.common.js

@@ -0,0 +1,44 @@
+const path = require('path')
+const GitRevisionPlugin = require('git-revision-webpack-plugin')
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
+const webpack = require('webpack')
+const gitRevisionPlugin = new GitRevisionPlugin()
+
+module.exports = {
+  entry: ['./src/index.tsx'],
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    publicPath: '/',
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+  },
+  module: {
+    rules: [
+      {
+        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.PNG$/, /\.svg$/, /\.eot$/, /\.woff$/, /\.woff2$/, /\.ttf$/],
+        loader: require.resolve('url-loader'),
+        options: {
+          limit: 10000,
+          name: 'static/media/[name].[hash:8].[ext]',
+        },
+      },
+      {
+        test: /.tsx?$/,
+        use: [{ loader: 'ts-loader', options: { transpileOnly: true } }],
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new webpack.EnvironmentPlugin({
+      GIT_VERSION: gitRevisionPlugin.version(),
+      APP_VERSION: require('./package.json').version,
+      GIT_COMMITHASH: gitRevisionPlugin.commithash(),
+      GIT_BRANCH: gitRevisionPlugin.branch(),
+    }),
+    new MonacoWebpackPlugin({
+      languages: ['javascript', 'json'],
+    }),
+  ],
+}

apps/sensenet/webpack.dev.js

@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'cheap-module-source-map',
+  devServer: {
+    historyApiFallback: true,
+  },
+  output: {
+    filename: 'static/js/bundle.js',
+    chunkFilename: 'static/js/[name].chunk.js',
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin({
+      eslint: true,
+    }),
+    new HtmlWebpackPlugin({
+      template: './index.html',
+      favicon: './src/assets/favicon.ico',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          require.resolve('style-loader'),
+          {
+            loader: require.resolve('css-loader'),
+            options: {
+              importLoaders: 1,
+            },
+          },
+        ],
+      },
+    ],
+  },
+})

apps/sensenet/webpack.prod.js

@@ -0,0 +1,75 @@
+const path = require('path')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'source-map',
+  output: {
+    filename: 'static/js/[name].[contenthash:8].js',
+    chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        sourceMap: true,
+        terserOptions: {
+          keep_classnames: true,
+          keep_fnames: true,
+        },
+      }),
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new ForkTsCheckerWebpackPlugin({
+      async: false,
+      useTypescriptIncrementalApi: true,
+      memoryLimit: 4096,
+    }),
+    new MiniCssExtractPlugin(),
+    new HtmlWebpackPlugin({
+      template: './index.html',
+      favicon: './src/assets/favicon.ico',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true,
+      },
+    }),
+    new CopyPlugin([
+      { from: path.resolve(`${__dirname}/_redirects`), to: path.resolve(`${__dirname}/build`) },
+      { from: path.resolve(`${__dirname}/web.config`), to: path.resolve(`${__dirname}/build`) },
+    ]),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              esModule: true,
+            },
+          },
+          'css-loader',
+        ],
+      },
+    ],
+  },
+})

package.json

@@ -45,7 +45,7 @@
     "dms": "yarn workspace sn-dms-demo",
     "build": "tsc -b packages",
     "build:dms": "yarn && yarn build && yarn workspace sn-dms-demo run build:webpack",
-    "build:sn-app": "yarn && yarn build && yarn workspace @sensenet/sn-app run build:webpack",
+    "build:sn-app": "yarn && yarn build && yarn workspace @sensenet/sn-app run build",
     "build:docs": "yarn && yarn build && yarn workspace sn-react-component-docs run build-storybook",
     "clean:packages": "rimraf ./packages/**/dist ./packages/**/tsconfig.tsbuildinfo ./packages/tsconfig.tsbuildinfo",
     "test": "jest",