/* webpack.config.js */ require('style-loader'); require('css-loader'); var path = require('path'); const projectName = 'rhodecode-components'; let destinationDirectory = path.join(process.cwd(), 'rhodecode', 'public', 'js') if (process.env.RC_STATIC_DIR) { destinationDirectory = process.env.RC_STATIC_DIR; } // doing it this way because it seems that plugin via grunt does not pick up .babelrc let babelRCOptions = { "assumptions": { "setPublicClassFields": true }, "presets": [ ["@babel/preset-env", { "targets": { "esmodules": true }, "exclude": [ "@babel/transform-classes", "@babel/transform-regenerator", "@babel/transform-async-generator-functions" ] }] ] }; module.exports = { mode: 'production', optimization: { minimize: false, // Disable webpack minification - grunt-terser handles final minification usedExports: false, // Disable tree-shaking - it breaks Lit's re-exports }, // Tell Webpack which file kicks off our app. entry: { main: path.resolve(__dirname, 'rhodecode/public/js/src/components/index.js'), }, output: { filename: 'rhodecode-components.js', path: path.resolve(destinationDirectory) }, // Tell Webpack which directories to look in to resolve import statements. // Normally Webpack will look in node_modules by default but since we're overriding // the property we'll need to tell it to look there. resolve: { modules: [ path.resolve(__dirname, 'node_modules'), ] }, // These rules tell Webpack how to process different module types. // Remember, *everything* is a module in Webpack. That includes // CSS, and (thanks to our loader) HTML. module: { rules: [ { test: /style-lit\.css$/, type: 'asset/source' }, { // Babel-loader for JS files test: /\.js$/, exclude: /node_modules/, use: {loader: 'babel-loader', options: babelRCOptions} }, { test: /intl-messageformat\.min\.js$/, use: { loader: 'imports-loader', options: { wrapper: 'window' } } } ] }, plugins: [] };