Skip to content
Snippets Groups Projects
Select Git revision
  • 7afcf0bb68a3269b17b9b38641a523dfa1b182f5
  • master default protected
  • rednatco-v2
  • rednatco
  • test
  • ntc-tube-uniform-color
  • ntc-tube-missing-atoms
  • restore-vertex-array-per-program
  • watlas2
  • dnatco_new
  • cleanup-old-nodejs
  • webmmb
  • fix_auth_seq_id
  • update_deps
  • ext_dev
  • ntc_balls
  • nci-2
  • plugin
  • bugfix-0.4.5
  • nci
  • servers
  • v0.5.0-dev.1
  • v0.4.5
  • v0.4.4
  • v0.4.3
  • v0.4.2
  • v0.4.1
  • v0.4.0
  • v0.3.12
  • v0.3.11
  • v0.3.10
  • v0.3.9
  • v0.3.8
  • v0.3.7
  • v0.3.6
  • v0.3.5
  • v0.3.4
  • v0.3.3
  • v0.3.2
  • v0.3.1
  • v0.3.0
41 results

webpack.config.common.js

Blame
    • Alexander Rose's avatar
      4904bae5
      background pass improvements · 4904bae5
      Alexander Rose authored
      - add PluginConfig.Background.Styles
      - file support, asset management
      - opacity, saturation, lightness controls for skybox/image
      - coverage controls for image/gradient
      - add backgrounds extension with examples
      - image handling for build/watch (webpack, cpx)
      4904bae5
      History
      background pass improvements
      Alexander Rose authored
      - add PluginConfig.Background.Styles
      - file support, asset management
      - opacity, saturation, lightness controls for skybox/image
      - coverage controls for image/gradient
      - add backgrounds extension with examples
      - image handling for build/watch (webpack, cpx)
    webpack.config.common.js 3.87 KiB
    const path = require('path');
    const fs = require('fs');
    const webpack = require('webpack');
    const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const VERSION = require('./package.json').version;
    
    class VersionFilePlugin {
        apply() {
            fs.writeFileSync(
                path.resolve(__dirname, 'lib/mol-plugin/version.js'),
                `export var PLUGIN_VERSION = '${VERSION}';\nexport var PLUGIN_VERSION_DATE = new Date(typeof __MOLSTAR_DEBUG_TIMESTAMP__ !== 'undefined' ? __MOLSTAR_DEBUG_TIMESTAMP__ : ${new Date().valueOf()});`);
        }
    }
    
    const sharedConfig = {
        module: {
            rules: [
                {
                    test: /\.(html|ico)$/,
                    use: [{
                        loader: 'file-loader',
                        options: { name: '[name].[ext]' }
                    }]
                },
                {
                    test: /\.(s*)css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        { loader: 'css-loader', options: { sourceMap: false } },
                        { loader: 'sass-loader', options: { sourceMap: false } },
                    ]
                },
                {
                    test: /\.(jpg)$/i,
                    type: 'asset/resource',
                },
            ]
        },
        plugins: [
            new ExtraWatchWebpackPlugin({
                files: [
                    './lib/**/*.scss',
                    './lib/**/*.html'
                ],
            }),
            new webpack.DefinePlugin({
                'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
                '__MOLSTAR_DEBUG_TIMESTAMP__': webpack.DefinePlugin.runtimeValue(() => `${new Date().valueOf()}`, true)
            }),
            new MiniCssExtractPlugin({ filename: 'molstar.css' }),
            new VersionFilePlugin(),
        ],
        resolve: {
            modules: [
                'node_modules',
                path.resolve(__dirname, 'lib/')
            ],
            fallback: {
                fs: false,
                crypto: require.resolve('crypto-browserify'),
                path: require.resolve('path-browserify'),
                stream: require.resolve('stream-browserify'),
            }
        },
        watchOptions: {
            aggregateTimeout: 750
        }
    };
    
    function createEntry(src, outFolder, outFilename, isNode) {
        return {
            target: isNode ? 'node' : void 0,
            entry: path.resolve(__dirname, `lib/${src}.js`),
            output: { filename: `${outFilename}.js`, path: path.resolve(__dirname, `build/${outFolder}`) },
            ...sharedConfig
        };
    }
    
    function createEntryPoint(name, dir, out, library) {
        return {
            entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
            output: { filename: `${library || name}.js`, path: path.resolve(__dirname, `build/${out}`), library: library || out, libraryTarget: 'umd', assetModuleFilename: 'images/[hash][ext][query]', 'publicPath': '' },
            ...sharedConfig
        };
    }
    
    function createNodeEntryPoint(name, dir, out) {
        return {
            target: 'node',
            entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
            output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
            externals: {
                argparse: 'require("argparse")',
                'node-fetch': 'require("node-fetch")',
                'util.promisify': 'require("util.promisify")',
                xhr2: 'require("xhr2")',
            },
            ...sharedConfig
        };
    }
    
    function createApp(name, library) { return createEntryPoint('index', `apps/${name}`, name, library); }
    function createExample(name) { return createEntry(`examples/${name}/index`, `examples/${name}`, 'index'); }
    function createBrowserTest(name) { return createEntryPoint(name, 'tests/browser', 'tests'); }
    function createNodeApp(name) { return createNodeEntryPoint('index', `apps/${name}`, name); }
    
    module.exports = {
        createApp,
        createEntry,
        createExample,
        createBrowserTest,
        createNodeEntryPoint,
        createNodeApp
    };