Combine multiple webpack parts into a webpack config. A part is either an object, which will be merged in to the config, or it is a function that takes the config as it is and is expected to return a new version of the config. The parts are resolved in the order they are provided. There is a small base config that combine starts with that looks like this:
{
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js',
publicPath: '/'
}
}
Object
:
Combined Webpack config object
// webpack.config.js
const parts = require('webpack-parts')
module.exports = parts.combine(
{
entry: "app/index.js",
output: {
path: "build"
}
},
parts.load.js(),
parts.load.css(),
parts.dev.sourceMaps(),
parts.optimize.minimize()
)
Use postcss to process css.
(Object
(default {}
)
)
Name | Description |
---|---|
$0.include [(string | Array)]
|
Webpack include conditions |
$0.postcssOptions [Object]
|
postcss-loader options |
$0.extractFilename [string]
|
Path to extract css to using
extract-text-webpack-plugin
when
NODE_ENV=production
|
Use babel to process js.
(Object
(default {}
)
)
Name | Description |
---|---|
$0.include [(string | Array)]
|
Webpack include conditions |
$0.basePath [string]
|
The base path to which js files will be
emitted. It's essentially a prefix to
fileName
and
chunkFilename
|
Include images via urls.
(Object
(default {}
)
)
Name | Description |
---|---|
$0.include [(string | Array)]
|
Webpack include conditions |
$0.imageOptions [Object]
|
Options to pass to
image-webpack-loader
|
$0.basePath [string]
|
The base path to which images files will be emitted. |
$0.inlineLimitBytes [number]
|
If set, inline images that are smaller
than $0.inlineLimitBytes when
NODE_ENV === 'production'
|
Extract all used dependencies from node_modules
into a separate vendor.js
.
By default, it will consider all dependencies used by all entry points, but
you override this by specifying $0.chunks
.
Make environment variables available via process.env
while building. The
variables are copied from the current environment at build time. If you want
to set environment variables to something other to what they actually are in
the current environment, use setEnv
. Makes use of
webpack.EnvironmentPlugin
.
Make environment variables available via process.env
while building. The
variables are set explicitly as specified in env
. Note that you should not
JSON.stringify
the values, that will be done for you. Makes use of
webpack.DefinePlugin
(Object)
An object whose keys are the names of environment
variables and whose values are the values to set. These
should be plain JSON objects.
Use webpack-bundle-analyzer
to analyze bundle size. Opens a web browser
with a visual graph of bundled modules and their sizes
Enable hot module reloading when NODE_ENV !== 'production'
(Object
(default {}
)
)
Name | Description |
---|---|
$0.useReactHotLoader [boolean]
|
Set to true if you're using
react-hot-loader
. Adds
react-hot-loader/patch
to each
entry.
|
$0.useWebpackHotMiddleware [boolean]
|
Set to true if you're using
webpack-hot-middleware
. Adds
webpack-hot-middleware/client
to each entry.
|
$0.webpackDevServerUrl [boolean]
|
Set to url such as
http://localhost:3000
if you're using
webpack-dev-server
. Adds
webpack-dev-server/client
and
webpack/hot/only-dev-server
to each entry. Should not be
used with
useWebpackHotMiddleware
.
|
Enable source maps. Uses different options depending on NODE_ENV.
Force to a single version of lodash across all dependencies. Lodash is big and we don't want to include it or its bits more than once. This is probably safe as long as there are no mixed major versions and the most recent version of lodash is the one forced.
(string)
Absolute path to lodash module
parts.optimize.forceSingleLodash(require.resolve('lodash'))
Minimize javascript code using uglify and configure all other loaders to
minimize and disable debug if NODE_ENV === 'production'
.
Do not include any of moment's locales. If we don't do this, they are all included and add 23kb min+gzip. You probably shouldn't use this if you need to support other locales.
Enable progress bar when building at the command line.