textpattern-theme-starter/webpack.config.js at master · lisabaut/textpattern-theme-starter · 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
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HTMLTemplates = require('./scripts/html-templates.js');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const postcssPresetEnv = require('postcss-preset-env');
const CopyPlugin = require('copy-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const ThemeConfiguration = require('./theme-configuration.js');

const themeSrc = 'txp-theme';
const themeDist = ThemeConfiguration.themeFolderName;
const assetsPath = './public/assets';

module.exports = (env, argv) => {
  const isProductionMode = argv.mode === 'production';

  return {
    mode: isProductionMode ? argv.mode : 'development',
    ...(!isProductionMode ? { devtool: 'inline-source-map' } : {}),
    ...(!isProductionMode
      ? {
          devServer: {
            static: './',
          },
        }
      : {}),
    entry: ['./src/ts/index.ts', './src/sass/index.scss'],
    output: {
      filename: 'js/bundle.js',
      path: path.resolve(__dirname, assetsPath),
      assetModuleFilename: 'images/[hash][ext][query]',
    },
    module: {
      // Rules are read from right to left
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.s[ac]ss$/i,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
            },
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  ident: 'postcss',
                  plugins: () => [
                    postcssPresetEnv({
                      autoprefixer: { grid: true },
                    }),
                  ],
                },
              },
            },
            'sass-loader',
          ],
        },
        {
          test: /\.(svg|png|jpe?g|gif)$/i,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            publicPath: 'images',
            esModule: false,
          },
          type: 'javascript/auto',
        },
        {
          test: /\.(eot|ttf|woff|woff2)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                publicPath: 'fonts',
                esModule: false,
              },
            },
          ],
          type: 'javascript/auto',
        },
      ],
    },
    plugins: [
      new WriteFilePlugin(),
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename: 'css/[name].css',
      }),
      // creates HTMLPlugins from each HTML file in folder "templates"
      ...HTMLTemplates.createPlugins(isProductionMode),
      new CopyPlugin({
        patterns: [
          {
            from: '**/*',
            context: path.resolve(__dirname, 'src', 'images'),
            to: path.resolve(__dirname, assetsPath, 'images'),
          },
          {
            from: '**/*',
            context: path.resolve(__dirname, 'src', 'fonts'),
            to: path.resolve(__dirname, assetsPath, 'fonts'),
          },
          {
            from: '**/*',
            context: path.resolve(__dirname, 'src', themeSrc),
            to: path.resolve(__dirname, 'public/themes', themeDist),
          },
        ],
      }),
    ],
  };
};