From 990b6448fe85fbf56dae0206a8478b36b7ce0e75 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 24 Aug 2020 01:20:37 +0800
Subject: Migrate to webpack chain.

---
 Timeline/ClientApp/webpack.common.js | 142 +++++++++++++++++++++++------------
 1 file changed, 96 insertions(+), 46 deletions(-)

(limited to 'Timeline/ClientApp/webpack.common.js')

diff --git a/Timeline/ClientApp/webpack.common.js b/Timeline/ClientApp/webpack.common.js
index bed968e1..a5dce879 100644
--- a/Timeline/ClientApp/webpack.common.js
+++ b/Timeline/ClientApp/webpack.common.js
@@ -1,48 +1,100 @@
-const autoprefixer = require('autoprefixer');
+const path = require('path');
 const htmlWebpackTemplate = require('html-webpack-template');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+const postcssPresetEnv = require('postcss-preset-env');
+const Config = require('webpack-chain');
 
-const commonRules = [
-  {
-    test: /\.css$/,
-    use: ['style-loader', 'css-loader'],
-  },
-  {
-    test: /\.(scss|sass)$/,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'postcss-loader',
-        options: {
-          plugins: function () {
-            return [autoprefixer];
-          },
-        },
-      },
-      'sass-loader',
-    ],
-  },
-  {
-    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/i,
-    use: [
-      {
-        loader: 'url-loader',
-        options: {
-          limit: 8192,
-        },
-      },
-    ],
-  },
-];
+const config = new Config();
+
+config.entry('index').add(path.resolve(__dirname, 'src/app/index.tsx'));
+
+config.module
+  .rule('ts')
+  .test(/\.ts(x?)$/)
+  .exclude.add(/node_modules/)
+  .end()
+  .use('babel')
+  .loader('babel-loader')
+  .end()
+  .use('ts')
+  .loader('ts-loader')
+  .end();
+
+config.module
+  .rule('js')
+  .test(/\.js(x?)$/)
+  .exclude.add(/node_modules/)
+  .end()
+  .use('babel')
+  .loader('babel-loader')
+  .end();
 
-const htmlCommonConfig = {
-  inject: false,
-  template: htmlWebpackTemplate,
+config.module
+  .rule('css')
+  .test(/\.css$/)
+  .use('style')
+  .loader('style-loader')
+  .end()
+  .use('css')
+  .loader('css-loader')
+  .end();
 
-  appMountId: 'app',
-  mobile: true,
+config.module
+  .rule('sass')
+  .test(/\.(scss|sass)$/)
+  .use('style')
+  .loader('style-loader')
+  .end()
+  .use('css')
+  .loader('css-loader')
+  .end()
+  .use('postcss')
+  .loader('postcss-loader')
+  .options({
+    plugins: () => [postcssPresetEnv(/* pluginOptions */)],
+  })
+  .end()
+  .use('sass')
+  .loader('sass-loader')
+  .end();
 
-  headHtmlSnippet: `
+config.module
+  .rule('file')
+  .test(/\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/i)
+  .use('url')
+  .loader('url-loader')
+  .options({
+    limit: 8192,
+  });
+
+config.resolve.extensions
+  .add('*')
+  .add('.js')
+  .add('.jsx')
+  .add('.ts')
+  .add('.tsx')
+  .end()
+  .plugin('pnp')
+  .use(PnpWebpackPlugin);
+
+config.resolveLoader.plugin('pnp').use(PnpWebpackPlugin.moduleLoader(module));
+
+config.output
+  .path(path.resolve(__dirname, 'dist/'))
+  .filename('[name].[hash].js')
+  .chunkFilename('[name].[hash].js')
+  .publicPath('/');
+
+config.plugin('html').use(HtmlWebpackPlugin, [
+  {
+    inject: false,
+    template: htmlWebpackTemplate,
+
+    appMountId: 'app',
+    mobile: true,
+
+    headHtmlSnippet: `
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
@@ -51,10 +103,8 @@ const htmlCommonConfig = {
   <meta name="msapplication-TileColor" content="#2d89ef">
   <meta name="theme-color" content="#ffffff">
   `,
-  title: 'Timeline',
-};
+    title: 'Timeline',
+  },
+]);
 
-module.exports = {
-  commonRules,
-  htmlCommonConfig,
-};
+module.exports = config;
-- 
cgit v1.2.3