const webpack = require("webpack"); const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const webpackBundleAnalyzer = require("webpack-bundle-analyzer"); const CopyPlugin = require("copy-webpack-plugin"); const config = require("./config"); process.env.NODE_ENV = config.prod.NODE_ENV; process.env.PUBLIC_URL = config.prod.PUBLIC_URL; let configs = {}; Object.keys(config.dev).forEach(z => { configs[`process.env.${z}`] = JSON.stringify(config.dev[z]); }); module.exports = { mode: "production", target: "web", devtool: "source-map", entry: "./src/index", output: { path: path.resolve(__dirname, "build"), publicPath: process.env.PUBLIC_URL, filename: "bundle.js" }, plugins: [ // Display bundle stats new webpackBundleAnalyzer.BundleAnalyzerPlugin({ analyzerMode: "static" }), new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }), new webpack.DefinePlugin(configs), new HtmlWebpackPlugin({ template: "src/index.html", favicon: "src/favicon.ico", minify: { // see https://github.com/kangax/html-minifier#options-quick-reference removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true } }), new CopyPlugin({ patterns: [{ from: "public", to: "public" }] }) ], module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader", "eslint-loader"] }, { test: /(\.css)$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { sourceMap: true } }, { loader: "postcss-loader", options: { plugins: () => [require("cssnano")], sourceMap: true } } ] } ] } };