@lcdev/webpack

Launchcode Webpack

Common webpack setup that can be shared between projects.

yarn add @lcdev/webpack@VERSION

Add a webpack.config.js file to the root of your project, and enter:

const { default: config } = require('@lcdev/webpack');

module.exports = config({
  dev: !!process.env.DEV,
  defaultPort: 3000,
  entry: './src/index.ts',
  typescript: true,
  cssModules: false,
  semantic: false,
});

Looking for node js bundling? Go to this section.

Change semantic to use semantic-ui (further setup is required - docs coming soon).

All that's required is:

1. src/index.html - can be blank if you want
2. tsconfig.json - normal typescript settings (feel free to target es6, babel does the polyfills)
3. a browserlist in package.json
4. app-config schema and file - try npx app-config init

In package.json:

  "scripts": {
    "dev": "DEV=1 webpack serve",
    "dev:prod": "USE_SOURCEMAPS=1 webpack serve --progress",
    "build": "webpack --progress",
    "clean": "rm -rf dist",
    "profile": "webpack --profile --json=stats.json && webpack-bundle-analyzer -p 8989 stats.json dist"
  },
  "devDependencies": {
    "webpack": "5",
    "webpack-cli": "4",
    "@lcdev/webpack": "2"
  }

Features

• Provides css, less, sass (scss) styling
• Does pretty good code splitting and optimization (even images)
• Autoprefixer, babel polyfills (core-js), etc. for your browser compatibility
• Easy support for bundle profiling (yarn profile script)
• Anything in public folder is copied into dist

Customization

Simply change the module export to your pleasing. Use the webpack-merge package for complex cases.

Node

const { node: config } = require('@lcdev/webpack');

module.exports = config({
  typescript: true,
  externals: {
    // whitelist the modules in your monorepo, so they're bundled together (see webpack-node-externals for more options)
    whitelist: [/^ps-.*$/],
  },
});