Skip to content

Instantly share code, notes, and snippets.

@Robbie-Cook
Last active April 5, 2024 01:34
Show Gist options
  • Select an option

  • Save Robbie-Cook/ad1669b537917ffdc63553550fc68be5 to your computer and use it in GitHub Desktop.

Select an option

Save Robbie-Cook/ad1669b537917ffdc63553550fc68be5 to your computer and use it in GitHub Desktop.
React Library Webpack Configuration
const nodeExternals = require("webpack-node-externals");
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "./src/index.ts"),
output: {
path: path.resolve(__dirname, "./dist"),
filename: "index.js",
},
mode: "production",
target: "node",
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".jsx"],
},
module: {
rules: [
{
test: /(\.ts(x?))|(\.jsx?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader",
},
],
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "source-map-loader",
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
// Use the chain sass-loader -> css-loader -> style-loader
// But use MiniCssExtractPlugin on prod, so we get a file.
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "sass-loader",
},
],
}
],
},
// externals: {
// 'react': 'react', // Case matters here
// 'react-dom' : 'react-dom' // Case matters here
// },
externals: [nodeExternals()],
plugins: [],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment