有一个使用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