Webpack Configs
Various slightly opinionated shared webpack configurations to help you survive. Particularly useful with tools like webpack-merge.
- Webpack Configs
- Why?
- Requirements
- Installation
- Usage
- Shared Configuration Parts
devServer(options?: DevServer)
javascript(options?: {include?, exclude?, options?})
javascript.lint(options?: {include?, exclude?, options?})
javascript.sourcemap()
typescript(options?: {include?, exclude?, options?})
typescript.sourcemap()
typescript.hmr(options?: {include?, exclude?, options?, tsOptions?})
style(options: {test, include, exclude})
- Contribution
- License
Why?
- Specifically for my lazy self use case to not repeat common config over and over again.
- Maybe for you who have similarly use case as mine.
- More composed build.
Requirements
- Node JS >= 6 LTS
- Webpack >= 2.2.0
Installation
with npm
npm install -D webpack webpack-merge webpack-configs
with yarn
yarn add -D webpack webpack-configs
This will not include any loader dependencies used in the shared configurations. You will have to install them separately.
Usage
const shared = ;// dev servershared;// javascript with babel-loadershared;// javascript linting with eslint-loadersharedjavascript;// style loaderssharedstyleoptions ;
These configurations are best used with webpack-merge
.
// webpack.config.jsconst webpack = ;const merge = ;const shared = ;const HtmlWebpackPlugin = ; const common = ; { return ;} { return ;} module { if env === 'production' return ; return ;};
See more about composing webpack configuration in this SurviveJS page.
Shared Configuration Parts
devServer(options?: DevServer)
Returns webpack configuration which include devServer
and webpack.HotModuleReplacementPlugin
.
- [optional]
options
- DevServer options with some defaults set belowhost
- useprocess.env.HOST
if set, or webpack defaults otherwise ('localhost'
)port
- useprocess.env.PORT
if set, or webpack defaults otherwise (8080
)historyApiFallback
- defaults totrue
stats
- defaults to'errors-only'
publicPath
- defaults to'/'
contentBase
- defaults topublic
dir relative toprocess.cwd()
hotOnly
- defaults tofalse
hot
- defaults tofalse
shared === devServer: host: processenvHOST || 'localhost' port: processenvPORT || 8080 historyApiFallback: true stats: 'errors-only' publicPath: '/' contentBase: `/public` hotOnly: true plugins:
javascript(options?: {include?, exclude?, options?})
Returns webpack configuration which include module.rules
with babel-loader
.
NOTES: You must add babel-loader
dependency to use this.
- [optional]
options
- Rule Config to be applied
shared === module: rules: test: /\.js$/ loader: 'babel-loader' include: './src'
javascript.lint(options?: {include?, exclude?, options?})
Returns webpack configuration which include module.rules
with eslint-loader
.
NOTES: You must add eslint-loader
dependency to use this.
- [optional]
options
- Rule Config to be applied
sharedjavascript === module: rules: test: /\.js$/ loader: 'eslint-loader' enforce: 'pre' include: './src'
javascript.sourcemap()
Add sourcemap loader support as mentioned in Webpack + Typescript Guide
sharedjavascript === module: rules: test: /\.js$/ enforce: 'pre' use: 'source-map-loader'
typescript(options?: {include?, exclude?, options?})
Returns webpack configuration which include module.rules
with awesome-typescript-loader
.
NOTES: You must add awesome-typescript-loader
dependency to use this.
- [optional]
options
- Rule Config to be applied
shared === module: rules: test: /\.ts$/ loader: 'awesome-typescript-loader' include: './src' plugins: 'awesome-typescript-loader' 'awesome-typescript-loader'
typescript.sourcemap()
Add sourcemap loader support as mentioned in Webpack + Typescript Guide
sharedtypescript === module: rules: test: /\.ts$/ enforce: 'pre' use: 'source-map-loader'
typescript.hmr(options?: {include?, exclude?, options?, tsOptions?})
Add React Hot Loader 3 into typescript build pipeline.
sharedtypescript === module: rules: test: /\.ts$/ use: 'react-hot-loader/webpack' loader: 'awesome-typescript-loader' options: tsOptions
style(options: {test, include, exclude})
Returns webpack configuration which include module.rules
with style-loader
.
NOTES: You must add style-loader
dependency to use this.
- required
options
- Rule Config to be applied - methods:
use(loader, options?)
- Chainstyle-loader
with other commonly used style related loaders.- required
loader
- The loader to use, e.g'css-loader'
. Or one of predefined loaders described below. - [optional] options - Options passed to the loader.
- required
extract(options?)
- Transform the configuration to useextract-text-webpack-plugin
. More info below.- [optional] options - Options passed to instantiate the
extract-text-webpack-plugin
.
- [optional] options - Options passed to instantiate the
sharedstyletest: /\.css$/ === module: rules: test: /\.css$/ use: 'style-loader'
You can chain with other shared style config below to make a use
style loaders chain, e.g. with prepocessor loader.
NOTES: The order of chain call matters.
sharedstyletest: /\.css$/;
Below are the list of available method to chain
style.css(options?)
Chain style-loader
with css-loader
.
NOTES: You must add css-loader
dependency to use this.
- [optional]
options
- Options forcss-loader
sharedstyletest: /\.css$/ === module: rules: test: /\.css$/ use: 'style-loader' loader: 'css-loader' options: modules: true
style.post(options?)
Chain style-loader
, css-loader
, with postcss-loader
.
NOTES: You must add postcss-loader
dependency to use this.
NOTES: Because the loader chain matters, you must call this after including css-loader
.
- [optional]
options
- [Options](https://github.com/postcss/postcss-loader#options forpostcss-loader
sharedstyletest: /\.css$/ === module: rules: test: /\.css$/ use: 'style-loader' loader: 'css-loader' options: modules: true 'postcss-loader'
style.less(options?)
Chain style-loader
, css-loader
, with less-loader
.
NOTES: You must add less-loader
dependency to use this.
NOTES: Because the loader chain matters, you must call this after including css-loader
.
- [optional]
options
- Options forless-loader
sharedstyletest: /\.css$/ === module: rules: test: /\.css$/ use: 'style-loader' loader: 'css-loader' options: modules: true 'less-loader'
style.sass(options?)
Chain style-loader
, css-loader
, with sass-loader
.
NOTES: You must add sass-loader
dependency to use this.
NOTES: Because the loader chain matters, you must call this after including css-loader
.
- [optional]
options
- Options forsass-loader
sharedstyletest: /\.css$/ === module: rules: test: /\.css$/ use: 'style-loader' loader: 'css-loader' options: modules: true 'sass-loader'
extract-text-webpack-plugin
Using You can call the extract
method as the last chain to transform the configuration
to use extract-text-webpack-plugin
instead. This will also include the plugin instance
in plugins
webpack array.
// You can use styleConfig in other config, e.g for development and testconst styleConfig = sharedstyletest: /\.css$/ // Then for a specific build config, you want it to use `extract-text-webpack-plugin`const extracted = styleConfig === module: rules: test: /\.css$/ loader: ExtractTextPlugin // plugins included plugins: filename: '[name].[contenthash].css'
Contribution
The included shared configs are non exhaustive, if you have some configurations you want to share please drop an issue.
License
MIT