webpack-kit

Webpack KIT

Make your webpack.config.js much simpler! Webpack KIT prepare preconfigured webpack config for you with:

• Babel
• TypeScript
• Sass (sass & scss)
• ESLint
• TSLint
• Image optimizations

Webpack KIT also provides preconfigured WebpackDevServer and WebpackDevMiddleware with Hot Reload support. You can use Webpack KIT for frontend and backend compilation. This kit is opinionated about the configuration of webpack, but not about a configuration of Babel, ESlint, TSLint, Stylelint, PostCSS and TypeScript. You can configure all of that by yourself. Just create the configuration file, and Webpack KIT will set webpack configuration accordingly. If you use typescript, don't forget to create tsconfig.json file.

Webpack KIT exports config function with the following parameters:

• @param config: specify your entry, output and overwrite any defaults with your settings. It uses webpack-merge with smart strategy under the hood.
• @param argv: This describes the options passed to webpack, same as argv in https://webpack.js.org/configuration/configuration-types/#exporting-a-function
• @returns webpack configuration object.

Example:

const { config } = require("webpack-kit");

//  returns configuration function with HMR and profiling enabled
const myConfig = config(
  { entry: "src/index.js" },
  { profile: true, hot: true }
);

// returns configuration object with development mode and HMR enabled
myConfig("development", { hot: true });

You can run webpack-kit even without any configuration, just run:

npx webpack-kit --entry ./src/main.js --output-path ./dist/ --watch

or add npm scripts to your package.json, e.g.:

{
  "scripts": {
    "watch": "webpack-kit --entry ./src/main.js --output-path ./dist/ --watch",
    "build": "webpack-kit --entry ./src/main.js --output-path ./dist/"
  }
}

Installation

npm install webpack-kit --save-dev or yarn add -D webpack-kit

Usage without webpack.config.js

When you don't need to improve default configuration, you can run webpack-kit directly:

npx webpack-kit --help

All attributes are same like for webpack-cli, webpack-kit just load prepared configuration for all you need to build your project.

Usage for frontend with custom configuration

To compile frontend code, create webpack.config.js file with following content:

const path = require("path");
const { config } = require("webpack-kit");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = (mode = "production", argv = {}) =>
  config(
    {
      mode,
      entry: {
        client: path.resolve(__dirname, "src/client/index.tsx")
      },
      output: {
        path: path.resolve(__dirname, "build/public")
      },
      devServer: {
        port: 3000,
        host: "localhost"
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve("src/public/index.html"),
          title: "My Awesome Application"
        })
      ]
    },
    argv
  );

Optionally create configuration files for Babel, PostCSS, ESlint, Stylelint or TSlint.

Usage for backend with custom configuration

To compile backend code, create webpack.config.js file with following content:

const path = require("path");
const { config } = require("webpack-kit");

module.exports = (mode = "production", argv = {}) =>
  config(
    {
      mode,
      target: "node",
      entry: {
        server: path.resolve(__dirname, "src/server/index.js")
      },
      output: {
        path: path.resolve(__dirname, "build")
      }
    },
    argv
  );

Please don't forget to specify the target: node. Optionally create configuration files for babel, ESlint or TSlint.

Usage with Webpack Dev Middleware

To use Webpack Dev Middleware, put following code to your server.js file should look like this:

const express = require("express");
const app = express();

// Use webpack-dev-middleware in development only
if (process.env.NODE_ENV === "development") {
  // Load configuration from your webpack.config.js file
  const webpackConfig = require("../../webpack.config");

  // Import webpack-dev-middleware
  const { devMiddleware } = require("webpack-kit");

  // Use webpack-dev-middleware in your express.
  // If you pass `hot` argument, it will also use webpack-hot-middleware and configure entrypoints correctly
  app.use(devMiddleware(webpackConfig("development", { hot: true })));
}

// Serve compiled static files from the build folder
app.use(
  express.static("./build/public", {
    index: false,
    redirect: false,
    maxAge: "1y"
  })
);

// Fallback is built index.html, so your SPA works even after reload
app.use((req, res) => {
  res.sendFile(resolve(process.cwd(), "./build/public/index.html"));
});

// Start the server
app.listen(port, () =>
  console.log(`Listening at http://${process.env.HOST}:${process.env.PORT}`)
);

TODO

• Accept all --env posibilities as in the documentation
• Accept --mode and set that correctly
• When used bin webpack-kit, find webpack configuration and use that for overwrite