有一个使用webpack 以及 webpack-dev-server 的Grunt插件: grunt-webpack.

它用起来非常方便:

  1. module.exports = function(grunt) {
  2.     grunt.loadNpmTasks("grunt-webpack");
  3.     grunt.initConfig({
  4.         webpack: {
  5.             options: {
  6.                 // configuration for all builds
  7.             },
  8.             build: {
  9.                 // configuration for this build
  10.             }
  11.         },
  12.         "webpack-dev-server": {
  13.             options: {
  14.                 webpack: {
  15.                     // configuration for all builds
  16.                 },
  17.                 // server and middleware options for all builds
  18.             },
  19.             start: {
  20.                 webpack: {
  21.                     // configuration for this build
  22.                 },
  23.                 // server and middleware options for this build
  24.             }
  25.         }
  26.     });
  27. };

开发

开发过程中的最佳利器就是 [[webpack-dev-server]], 但是它需要生成一个server. 如果没法做到这个或者太复杂没法做到, 正常的 build - watch cycle 也是可行的.

示例

阅读一下这个Gruntfile例子.它包含了以下三个模式:

  • webpack-dev-server
  • build - watch cycle
  • production build

Example Gruntfile