\n\n- Version 6 of `grunt-webpack` supports webpack 5 and (optional) `webpack-dev-server` version 5.\n- Node.js 18.19.0 or newer\n\n
Install
\n\nInstall this grunt plugin next to your project's [Gruntfile.js](http://gruntjs.com/getting-started). You also need to install webpack yourself, this grunt plugin does not install webpack itself.\n\n```bash\nnpm install webpack grunt-webpack --save-dev\n```\n\nIf you also want to use the webpack-dev-server task you also need to install `webpack-dev-server`\n\n```bash\nnpm install webpack-dev-server --save-dev\n```\n\nThen add this line to your project's `Gruntfile.js` gruntfile:\n\n```javascript\nconst webpackConfig = require('./webpack.config.js');\n\nmodule.exports = function(grunt) {\n\n // Project configuration.\n grunt.initConfig({\n ...,\n webpack: {\n myConfig: webpackConfig,\n },\n ...\n });\n\n grunt.loadNpmTasks('grunt-webpack');\n};\n```\n\n
Configuration
\n\n`webpack-grunt` offers two different tasks `webpack` and `webpack-dev-server`. Both support all webpack options as\ncan be seen in the [webpack documentation][webpack-config]. For exceptions and additions see this list.\n\n### Both Tasks\n\n#### progress\n\nType: `bool`\nDefault: `true` (`false` if no TTY present)\n\nActivates or deactivates the progress output of webpack.\n\n### Webpack Task\n\n#### failOnError\n\nType: `bool`\nDefault: `true` (`false` if watch mode is used)\n\nWill 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.\n\n#### keepalive\n\nType: `bool`\nDefault: `false` (`true` if watch mode is used)\n\nWhen set to true the grunt process/task will be kept alive after webpack task is finished. This is especially useful for `watch` as this usually needs to run as long as not manually killed.\n\n#### storeStatsTo\n\nType: `string`\nDefault: `null`\n\nWhen 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 `<%= %>`.\n\n```js\n...\nstoreStatsTo: \"webpackStats\"\n\n...\n\n<%= webpackStats.hash %>\n...\n```\n\n> For more information about grunt template tags have a look at the [grunt docs][grunt-template].\n\n#### watch\n\nType: `bool`\nDefault: `undefined`\n\n> Turn on watch mode. This means that after the initial build, webpack will continue to watch for changes in any of the resolved files.\n\nTurning on watch mode also sets the following defaults:\n\n- Default `cache` to `true`\n- Default `keepalive` to `true`\n- Default `failOnError` to `false`\n\n### Webpack-dev-server Task\n\nThere are no special options for this task. Some changed defaults for WebpackDevServer options are:\n\n| Name | default value |\n| -------------- | ------------- |\n| devServer.host | localhost |\n\n
Examples
\n\n### Webpack\n\n#### imported config\n\nThis is a simple example that requires the webpack config from the config file.\nIt also disables stats in non 'development' environments and enables watch in development.\n\n```javascript\nconst webpackConfig = require(\"./webpack.config.js\");\n\nmodule.exports = function (grunt) {\n grunt.initConfig({\n webpack: {\n options: {\n stats: !process.env.NODE_ENV || process.env.NODE_ENV === \"development\",\n },\n prod: webpackConfig,\n dev: Object.assign({ watch: true }, webpackConfig),\n },\n });\n\n grunt.loadNpmTasks(\"grunt-webpack\");\n};\n```\n\n> The webpack task in this example has two targets called `prod` and `dev`. They can be renamed to everything besides `options`. See the [grunt docs][grunt-targets] for more information about targets.\n\nOn the command line you can then do the following.\n\n```bash\n# Run webpack with the `prod` target\n> NODE_ENV='production' grunt webpack:prod\n\n# Run webpack with the `dev` target\n> grunt webpack:dev\n\n# Run webpack for all targets\n> grunt webpack\n```\n\n> For more examples and information have a look at the [webpack documentation][webpack-start] which mostly also applies here besides the noted differences above.\n\n#### Lazy config loading\n\nIn some cases you might want to load the webpack config lazy. This can be done by specifying a function as the config value. The first paramter to this function will be the complete grunt config, which can be used in cases where grunt templates do not work (see below).\n\n```js\nmodule.exports = function (grunt) {\n grunt.initConfig({\n webpack: {\n myconfig: () => ({\n entry: path.join(__dirname, \"entry\"),\n output: {\n path: __dirname,\n filename: \"output.js\",\n },\n }),\n },\n });\n\n grunt.loadNpmTasks(\"grunt-webpack\");\n};\n```\n\nYou could also use a promise\n\n```js\nconst webpackConfig = require(\"./webpack.config.js\");\n\nmodule.exports = function (grunt) {\n grunt.initConfig({\n webpack: {\n myconfig: Promise.resolve(webpackConfig),\n },\n });\n\n grunt.loadNpmTasks(\"grunt-webpack\");\n};\n```\n\n#### Grunt templates\n\ngrunt-webpack supports grunt templates in all string values in it's configuration.\n\nIn the next example we use a template for `output.filename`.\n\n```js\nmodule.exports = function (grunt) {\n grunt.initConfig({\n outputFileName: \"output.js\",\n webpack: {\n myconfig: {\n entry: path.join(__dirname, \"entry\"),\n output: {\n path: __dirname,\n filename: \"<%= outputFileName %>\",\n },\n },\n },\n });\n\n grunt.loadNpmTasks(\"grunt-webpack\");\n};\n```\n\nFor plugins we cannot support grunt template interpolation, as plugins are class instances which we cannot modify during runtime without breaking them. If you need to use template in a string option to a plugin, you can use lazy config loading and use the supplied config. You can also use grunt inside directly to access utility methods:\n\n```js\nmodule.exports = function (grunt) {\n grunt.initConfig({\n name: \"Webpack\",\n pkg: {\n copyright: \"<%= name %>\",\n version: \"6.55.345\",\n },\n webpack: {\n myconfig: (config) => ({\n entry: path.join(__dirname, \"entry\"),\n output: {\n path: __dirname,\n filename: \"output.js\",\n },\n plugins: [\n new webpack.BannerPlugin({\n banner: `/*! ${config.pkg.copyright} - Version ${\n config.pkg.version\n } dated ${grunt.template.today()} */`,\n raw: true,\n }),\n ],\n }),\n },\n });\n\n grunt.loadNpmTasks(\"grunt-webpack\");\n};\n```\n\n### Webpack-dev-server\n\n#### imported config\n\nThis is a simple example that requires the webpack config from the config file. Read how to configure webpack-dev-server in the [webpack-dev-server documentation][webpack-dev-server-config].\n\n```javascript\nconst webpackConfig = require(\"./webpack.config.js\");\n\nmodule.exports = function (grunt) {\n grunt.initConfig({\n \"webpack-dev-server\": {\n dev: webpackConfig,\n },\n });\n\n grunt.loadNpmTasks(\"grunt-webpack\");\n};\n```\n\n> The webpack-dev-server task in this example has one target called `dev`. They can be renamed to everything besides `options`. See the [grunt docs][grunt-targets] for more information about targets.\n\nOn the command line you can then do the following.\n\n```bash\n\n# Run webpack-dev-server with the `dev` target\n> grunt webpack-dev-server:dev\n\n# Run webpack for all possible targets\n> grunt webpack-dev-server\n```\n\n> For more examples and information have a look at the [webpack documentation]5] which mostly also applies here besides the noted differences above.\n\n
Troubleshooting
\n\n### Circular reference detected (.plugins)\n\nIf you encounter this message it means that one of the plugins which are present in your config have circular references.\nThis is not a bug in the plugin and is totally fine for webpack, but sadly grunt cannot handle these.\n\nTo workaround this problem use lazy config loading, by wrapping your config inside a function.\n\n```js\nconst webpackConfig = require(\"./webpack.config.js\");\n\nmodule.exports = function (grunt) {\n grunt.initConfig({\n webpack: {\n myconfig: () => webpackConfig,\n },\n });\n\n grunt.loadNpmTasks(\"grunt-webpack\");\n};\n```\n\n[grunt-template]: http://gruntjs.com/api/grunt.template\n[webpack-config]: https://webpack.js.org/configuration/\n[webpack-dev-server-config]: https://webpack.js.org/configuration/dev-server/\n[grunt-targets]: https://gruntjs.com/configuring-tasks#task-configuration-and-targets\n[webpack-start]: https://webpack.js.org/guides/get-started/\n[npm]: https://img.shields.io/npm/v/grunt-webpack.svg\n[npm-url]: https://npmjs.com/package/grunt-webpack\n","readmeFilename":"README.md","users":{"pwn":true,"ugarz":true,"biqing":true,"mrbgit":true,"mhaidarh":true,"breezejyf":true,"cascadejs":true,"amdsouza92":true,"jehoshua02":true,"flumpus-dev":true,"matiasmarani":true,"intuitivcloud":true,"stevecooperorg":true,"yanghaojyhangdian":true}}
![](\"https://cdn.worldvectorlogo.com/logos/grunt.svg\")
\n \n ![](\"https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg\"){kind=icon}
\n \n