Webpack Setup for React:

Live-reload:

// webpack config file export
module.exports = {
    mode: "development",
    devServer: {
        liveReload: true,
    },
};

Hot-reload:

// webpack config file export
module.exports = {
    mode: "development",
    devServer: {
        liveReload: false,
        hot: true,
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
};

Loaders:

Snapshots:

babel-loader:

{
    test: /\.js$/i,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
        },
    }
}

css-loader:

{
    test: /\.css$/i,
    use: [
        "style-loader", // for production { loader: MiniCssExtractPlugin.loader }
        {
            loader: "css-loader",
            options: { sourceMap: true }
        },
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: {
                        "postcss-import": {},
                        "postcss-preset-env": {
                            browsers: ["last 1 version"], // for production change this
                            stage: 0
                        }
                    }
                },
                sourceMap: true
            }
        }
    ]
}

sass-loader:

{
    test: /\.s[ac]ss$/i,
    use: [
        "style-loader", // for production { loader: MiniCssExtractPlugin.loader }
        {
            loader: "css-loader",
            options: { sourceMap: true }
        },
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: {
                        "postcss-import": {},
                        "postcss-preset-env": {
                            browsers: ["last 1 version"],
                            stage: 0
                        }
                    }
                },
                sourceMap: true
            }
        },
        {
            loader: "sass-loader",
            options: {
                sourceMap: true,
                implementation: require("sass")
            }
        }
    ]
}

file-loader:

{
    test: /\.(png|jpe?g|gif)$/i,
    use: {
        loader: "file-loader",
        options: {
            publicPath: path.resolve(__dirname, "../dist/static/"),
            outputPath: "images"
        }
    }
}

url-loader:

{
    test: /\.svg$/i,
    use: { loader: "url-loader" }
}

Plugins:

HtmlWebpackPlugin:

new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "../public/index.html"),
    favicon: path.resolve(__dirname, "../public/favicon.ico"),
});

MiniCssExtractPlugin:

new MiniCssExtractPlugin({
    filename: path.join("static", "css", "[name].[contenthash].css"),
});

Anik7303/react-webpack-setup

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages