Skip to content

Instantly share code, notes, and snippets.

@olayenca

olayenca/webpack.common.js

Last active October 1, 2019 19:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save olayenca/e2f47c695e93930b53490a89c2382c7a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save olayenca/e2f47c695e93930b53490a89c2382c7a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Olayinka Otuniyi revised this gist Oct 1, 2019. 1 changed file with 0 additions and 19 deletions.
    19 changes: 0 additions & 19 deletions webpack.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +0,0 @@
    const path = require("path");
    const CopyWebpackPlugin = require("copy-webpack-plugin");
    module.exports = env => ({
    mode: env,
    entry: {
    vanilla: "./src/main.js",
    react: "./src/index.js"
    },
    output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: env === "production" ? "./" : "/"
    },
    plugins: [
    new CopyWebpackPlugin([
    { from: "dockerAssets"} //create a folder containing dockerfile and ngnix.conf
    ])
    ]
    });
  2. Olayinka Otuniyi renamed this gist Sep 29, 2019. 1 changed file with 0 additions and 0 deletions.
    0 webpack.js → webpack.txt
    View file
    File renamed without changes.
  3. Olayinka Otuniyi revised this gist Sep 29, 2019. 1 changed file with 19 additions and 0 deletions.
    19 changes: 19 additions & 0 deletions webpack.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    const path = require("path");
    const CopyWebpackPlugin = require("copy-webpack-plugin");
    module.exports = env => ({
    mode: env,
    entry: {
    vanilla: "./src/main.js",
    react: "./src/index.js"
    },
    output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: env === "production" ? "./" : "/"
    },
    plugins: [
    new CopyWebpackPlugin([
    { from: "dockerAssets"} //create a folder containing dockerfile and ngnix.conf
    ])
    ]
    });
  4. Olayinka Otuniyi revised this gist Sep 28, 2019. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions webpack.common.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,10 +2,8 @@ const path = require("path");
    const webpack = require("webpack");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const HtmlWebpackTagsPlugin = require("html-webpack-tags-plugin");
    const CopyWebpackPlugin = require("copy-webpack-plugin");
    const autoprefixer = require("autoprefixer");
    const ServiceWorkerWebpackPlugin = require("serviceworker-webpack-plugin");

    module.exports = env => ({
    mode: env,
  5. Olayinka Otuniyi revised this gist Sep 28, 2019. No changes.
  6. Olayinka Otuniyi created this gist Sep 28, 2019.
    153 changes: 153 additions & 0 deletions webpack.common.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,153 @@
    const path = require("path");
    const webpack = require("webpack");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const HtmlWebpackTagsPlugin = require("html-webpack-tags-plugin");
    const CopyWebpackPlugin = require("copy-webpack-plugin");
    const autoprefixer = require("autoprefixer");
    const ServiceWorkerWebpackPlugin = require("serviceworker-webpack-plugin");

    module.exports = env => ({
    mode: env,
    entry: {
    vanilla: "./src/main.js",
    react: "./src/index.js"
    },
    output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: env === "production" ? "./" : "/"
    },
    plugins: [
    new webpack.DefinePlugin({
    "process.env": {
    NODE_ENV: JSON.stringify(env),
    PUBLIC_URL: JSON.stringify("/build/"),
    SKIP_PREFLIGHT_CHECK: true
    }
    }),
    new HtmlWebpackPlugin({
    inject: true,
    template: "./public/index.html",
    filename: "./index.html",
    chunks: ["vanilla"],
    favicon: "./public/favicon.ico",
    minify: {
    removeComments: true,
    collapseWhitespace: false
    }
    }),
    new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css",
    ignoreOrder: false
    }),
    new CopyWebpackPlugin([
    { from: "public/assets/dockerAssets"}
    ])
    ],
    module: {
    rules: [
    {
    test: /.(js|jsx)$/,
    exclude: /node_modules/,
    include: [path.resolve(__dirname, "src")],
    loader: "babel-loader",
    options: {
    plugins: ["syntax-dynamic-import"],
    presets: [
    [
    "@babel/preset-env",
    {
    modules: false
    }
    ],
    [
    "@babel/preset-react",
    {
    modules: false
    }
    ]
    ]
    }
    },
    {
    test: /\.(gif|jpe?g|svg|ico)$/i,
    loader: "file-loader",
    options: {
    name: "[path][name].[ext]"
    }
    },
    {
    test: /\.css$/i,
    use: [
    "style-loader",
    "css-loader",
    "resolve-url-loader",
    {
    loader: "postcss-loader",
    options: {
    ident: "postcss",
    plugins: [autoprefixer()]
    }
    }
    ]
    },
    {
    test: /\.scss$/,
    use: [
    {
    loader: MiniCssExtractPlugin.loader
    },
    {
    loader: "css-loader",
    options: {
    sourceMap: true
    }
    },
    {
    loader: "resolve-url-loader"
    },
    {
    loader: "sass-loader",
    options: {
    sourceMap: true
    }
    }
    ]
    },
    {
    test: /\.svg$/,
    use: ["svg-loader"]
    },
    {
    test: /\.(eot|woff|woff2|svg|ttf|otf)([\?]?.*)$/,
    use: ["file-loader?name=[name].[ext]"]
    },
    {
    test: /\.(png|woff|woff2|eot|ttf|svg|ico)$/,
    use: ["url-loader"]
    }
    ]
    },
    performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
    hints: false
    },
    optimization: {
    splitChunks: {
    cacheGroups: {
    vendors: {
    priority: -10,
    test: /[\\/]node_modules[\\/]/
    }
    },

    chunks: "async",
    minChunks: 3,
    minSize: 30000,
    name: true
    }
    }
    });