svelte-webpack-template/webpack.config.js at master · sonyseng/svelte-webpack-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const path = require('path');

function getPath(...pathParts) {
  return path.resolve(__dirname, ...pathParts);
}
module.exports = (env) => {
  const isDev = !!(env && env.development);

  console.log('isDevelopment Mode: ', isDev);

  return {
    entry: {
      app: getPath('src', 'main.ts')
    },

    output: {
      path: getPath('public', 'build'),
      filename: isDev ? '[name].js' : '[name].[contenthash].js',
      chunkFilename: isDev ? '[name].js' : '[name].[contenthash].js'
    },

    optimization: {
      minimize: !isDev,
      minimizer: ['...', new CssMinimizerPlugin()],
      usedExports: true,
      splitChunks: {
        chunks: 'all',
        name: (module, chunks, cacheGroupKey) => {
          const allChunksNames = chunks.map((chunk) => chunk.name).join('_');
          const prefix = cacheGroupKey === 'defaultVendors' ? 'vendors' : cacheGroupKey;
          return `${prefix}_${allChunksNames}`;
        },
      },
      runtimeChunk: { name: 'runtime' }
    },

    resolve: {
      alias: {
        svelte: getPath('node_modules', 'svelte'),
        src: getPath('src')
      },
      extensions: ['.ts', '.mjs', '.js', '.css', '.svelte'],
      mainFields: ['svelte', 'browser', 'module', 'main']
    },

    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          loader: 'ts-loader',
          options: {
            transpileOnly: isDev,
            context: getPath(),
            configFile: getPath('tsconfig.json')
          }
        },
        {
          test: /\.svelte$/,
          loader: 'svelte-loader',
          options: {
            compilerOptions: {
              dev: isDev
            },

            emitCss: true,
            hotReload: isDev,
            preprocess: require('svelte-preprocess')({})
          }
        },
        {
          // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
          test: /node_modules\/svelte\/.*\.mjs$/,
          resolve: {
            fullySpecified: false
          }
        },
        {
          test: /\.css$/,
          sideEffects: true, // So we don't remove global css
          use: [
            {
              loader: MiniCssExtractPlugin.loader
            },
            {
              loader: 'css-loader',
              options: {
                sourceMap: isDev
              }
            }
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          loader: 'file-loader',
          options: { name: isDev ? '[name].[ext]' : '[name].[contenthash].[ext]', outputPath: 'image' }
        }
      ]
    },

    plugins: [
      new ForkTsCheckerWebpackPlugin({ typescript: { configFile: getPath('tsconfig.json') } }),
      new HtmlWebpackPlugin({ template: getPath('src', 'index.html'), favicon: getPath('src', 'favicon.png') }),
      new MiniCssExtractPlugin({
        filename: isDev ? '[name].css' : '[name].[contenthash].css',
        chunkFilename: isDev ? '[name].css' : '[name].[contenthash].css'
      })
    ],

    mode: isDev ? 'development' : 'production',
    devtool: isDev ? 'source-map' : false,
    devServer: {
      hot: true,
      compress: true,
      port: 9000
    }
  };
};