const path = require('path'); const CleanWebpackPlugin = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const autoprefixer = require('autoprefixer'); const outputDirectory = "build"; var config = { devtool: 'source-map', module: { rules: [ { test: /.(ts)$/, loader: 'ts-loader', options: { transpileOnly: true, configFile: path.resolve(__dirname, './tsconfig.json') }, exclude: /node_modules/ }, { test: /\.jsx?$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['react'] } } ] }, { test: /\.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { modules: false, sourceMap: true, importLoader: 2 } }, "sass-loader" ] }, { test: /\.(cur|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, use: { loader: 'file-loader', query: { name: '[name].[hash:8].[ext]', outputPath: './assets/media/', publicPath: '/' } } }, { test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/, use: { loader: 'url-loader', query: { limit: 10000, name: '[name].[hash:8].[ext]', outputPath: './assets/media/', publicPath: '/' } } } ] }, devServer: { historyApiFallback: true, port: 3000, open: true }, node: { fs: "empty" }, stats: { // One of the two if I remember right entrypoints: false, children: false }, plugins: [ new CleanWebpackPlugin([outputDirectory]), new HtmlWebpackPlugin({ template: './public/index.html', }), new MiniCssExtractPlugin({ filename: "style.css", chunkFilename: "[name].css" }) ] }; var certConfig = Object.assign({}, config, { name: "cert", entry: "./src/cert.ts", output: { library: 'Cert', path: path.resolve(__dirname, outputDirectory), filename: "cert.ts" }, }); var brandingConfig = Object.assign({}, config, { name: "branding", entry: "./src/branding.js", output: { library: 'Branding', libraryTarget: 'umd', path: path.resolve(__dirname, outputDirectory), filename: "branding.js" }, }); module.exports = [ certConfig, brandingConfig, ]; // module.exports = mode => { // console.log('WEBPACK MODE: ', mode); // const PROD = (mode.WEBPACK_BUILD || false) // console.log('EXPORTS PROD: ', PROD); // return { // entry: PROD ? { // 'branding': './src/branding.js', // 'cert': './src/cert.ts', // } : './src/index.js', // output: { // library: 'Branding', // libraryTarget: 'umd', // path: path.resolve(__dirname, outputDirectory), // filename: '[name].js' // }, // // entry: PROD ? './src/branding.js' : './src/index.js', // // output: { // // library: 'Branding', // // libraryTarget: 'umd', // // path: path.resolve(__dirname, outputDirectory), // // filename: 'index.js', // // }, // devtool: 'source-map', // module: { // rules: [ // { // test: /.(ts)$/, // loader: 'ts-loader', // options: { // transpileOnly: true, // configFile: path.resolve(__dirname, './tsconfig.json') // }, // exclude: /node_modules/ // }, // { // test: /\.jsx?$/, // exclude: /node_modules/, // use: [ // { // loader: 'babel-loader', // options: { // presets: ['react'] // } // } // ] // }, // { // test: /\.(sa|sc|c)ss$/, // use: [ // MiniCssExtractPlugin.loader, // { // loader: "css-loader", // options: { // modules: false, // sourceMap: true, // importLoader: 2 // } // }, // "sass-loader" // ] // }, // { // test: /\.(cur|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, // use: { // loader: 'file-loader', // query: { // name: '[name].[hash:8].[ext]', // outputPath: './assets/media/', // publicPath: '/' // } // } // }, // { // test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/, // use: { // loader: 'url-loader', // query: { // limit: 10000, // name: '[name].[hash:8].[ext]', // outputPath: './assets/media/', // publicPath: '/' // } // } // } // ] // }, // devServer: { // historyApiFallback: true, // port: 3000, // open: true // }, // node: { // fs: "empty" // }, // stats: { // // One of the two if I remember right // entrypoints: false, // children: false // }, // plugins: [ // ...(PROD ? [new CleanWebpackPlugin([outputDirectory])] : []), // new HtmlWebpackPlugin({ // template: './public/index.html', // }), // new MiniCssExtractPlugin({ // filename: "style.css", // chunkFilename: "[name].css" // }) // ] // } // };