webpack-kit v0.7.2
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 useswebpack-merge
withsmart
strategy under the hood.@param argv
: This describes the options passed to webpack, same asargv
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
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago