Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
grunt-webpack
Advanced tools
This is the readme for version 3.0.0. For the 1.0 readme visit here.
Install this grunt plugin next to your project's Gruntfile.js. You also need to install webpack yourself, this grunt plugin does not install webpack itself.
yarn add webpack grunt-webpack --dev
You can still use npm
npm i webpack grunt-webpack --save-dev
If you also want to use the webpack-dev-server task you also need to install webpack-dev-server
yarn add webpack-dev-server --dev
Then add this line to your project's Gruntfile.js
gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({ ... });
grunt.loadNpmTasks('grunt-webpack');
};
webpack-grunt
offers two different tasks webpack
and webpack-dev-server
. Both support all webpack options as
can be seen in the webpack documentation. For exceptions and additions see this list.
Type: bool
Default: true
(false
if no TTY present)
Activates or deactivates the progress output of webpack.
Type: bool
Default: false
(true
if watch mode is used and for webpack-dev-server)
When set to true the grunt process will be kept alive after webpack task is finished. This is especially usefull for watch
and webpack-dev-server
as these usually need to run as long as not manually killed.
Type: bool
Default: true
(false
if watch mode is used)
Will terminate the grunt process when an error happens if set to true
. If set to false
the grunt process will not be immediately terminated on error and instead continue to run.
Type: string
Default: null
When set the stats from webpack will be written to a variable with the name provided in this option. The variable can later be used inside of other grunt tasks with template tags <%= %>
.
...
storeStatsTo: "webpackStats"
...
<%= webpackStats.hash %>
...
For more information about grunt template tags have a look at the grunt docs.
The webpack-dev-server options host
, hotOnly
, inline
, port
and public
which are usually only available in the CLI can also be used in this grunt-plugin.
This is a simple example that requires the webpack config from the config file. It also disables stats in non 'development' environments and enables watch in development.
const webpackConfig = require('./webpack.config');
module.exports = function(grunt) {
grunt.initConfig({
webpack: {
options: {
stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
},
prod: webpackConfig,
dev: Object.assign({ watch: true }, webpackConfig)
}
});
grunt.loadNpmTasks('grunt-webpack');
};
The webpack task in this example has two targets called
prod
anddev
. They can be renamed to everything besidesoptions
. See the grunt docs for more information about targets.
On the command line you can then do the following.
# Run webpack with the `prod` target
> NODE_ENV='production' grunt webpack:prod
# Run webpack with the `dev` target
> grunt webpack:dev
# Run webpack for all targets
> grunt webpack
For more examples and information have a look at the webpack documentation which mostly also applies here besides the noted differences above.
If you encounter this message it means that one of the plugins which are present in your config have circular references. This is totally fine for webpack, but sadly grunt cannot handle these.
To workaround this problem use lazy config loading, by wrapping your config inside a function.
module.exports = function(grunt) {
grunt.initConfig({
webpack: {
myconfig: function() {
return {
plugins: [...]
};
}
}
});
grunt.loadNpmTasks('grunt-webpack');
};
Daniel Tschinder |
Juho Vepsäläinen |
Joshua Wiens |
Kees Kluskens |
Sean Larkin |
FAQs
Use webpack with grunt.
The npm package grunt-webpack receives a total of 28,438 weekly downloads. As such, grunt-webpack popularity was classified as popular.
We found that grunt-webpack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.