@viewdo/dxp-story-cli/assets/story/webpack.config.js

DXP Story Management CLI

// @ts-nocheck

const path = require("path")
const fs = require("fs")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const HtmlReplaceWebpackPlugin = require("html-replace-webpack-plugin")
const {
  getStoryDataFileName,
  deploymentReplacements,
  load,
} = require("@viewdo/dxp-story-cli/dist/tools")

module.exports = (params, foo, type = "deploy") => {
  let dev = type == "preview"
  let { EPISODE: episode = "default" } = process.env

  let config = {
    entry: {},
    output: {
      filename: "[name].output.js",
      path: __dirname,
      publicPath: "/",
    },
    mode: "production",
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg|pdf)$/i,
          type: 'asset/inline'
        },
        {
          test: /\.s[ac]ss$/i,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                url: false,
                importLoaders: 2
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: [
                    require("tailwindcss")(path.resolve(__dirname, "tailwind.config.js")),
                    require("postcss-preset-env")({ stage: 1 }),
                    require("autoprefixer"),
                    require("cssnano")({
                      preset: ["default", { discardComments: { removeAll: true } }]
                    })
                  ]
                }
              }
            },
            { loader: 'sass-loader' }
          ],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].output.css",
      })
    ],
  }

  let entryName = getStoryDataFileName(episode)

  const storyConfig = load(__dirname, "story-config")
  if (storyConfig.host == "Hosted") {
    let htmlEntryPath = path.resolve(__dirname, `${entryName}.html`)
    config.plugins.push(
      new HtmlWebpackPlugin({
        template: htmlEntryPath,
        filename: dev ? `index.html` : `${entryName}.output.html`,
      })
    )
    if (!dev) {
      config.plugins.push(
        new HtmlReplaceWebpackPlugin(deploymentReplacements(entryName))
      )
    }
  }

  let jsEntryPath = path.resolve(__dirname, `${entryName}.js`)
  if (!fs.existsSync(jsEntryPath))
    jsEntryPath = path.resolve(__dirname, `default.js`)

  let cssEntryPath = path.resolve(__dirname, `${entryName}.scss`)
  if (!fs.existsSync(cssEntryPath))
    cssEntryPath = path.resolve(__dirname, `default.scss`)

  config.entry[entryName] = [jsEntryPath, cssEntryPath]

  return config
}