webpack项目中使用grunt监听文件变动自动打包编译

【小技巧】webpack项目中使用grunt监听文件变动自动打包编译

分享背景：编写npm插件的时候，在项目里的测试html文件内引用需要从入口文件转译打包成ES5。因此测试时每次改动都需要手动需要npm run build一下，很麻烦。获知grunt有个watch功能，折腾了一下，可以做到每次js文件改动时自动build一波，很灵性。

安装依赖包

//安装grunt
npm i grunt --save-dev

//grunt-contrib-watch，用于监听文件变化
npm i grunt-contrib-watch --save-dev

//grunt-loadnpmtasks，用于注册npm安装的功能模块
npm i grunt-loadnpmtasks --save-dev

//grunt-webpack，用于在grunt中运行webpack配置
npm i grunt-webpack --save-dev

编写Gruntfile.js配置文件

module.exports = function(grunt) {
  
  grunt.initConfig({
    // 配置一个webpack打包任务，其实就是跟普通的配置文件一样，具体内容因项目而异
    webpack: {
      home: {
        // entry要填系统的文件路径，谨记
        entry: '/Users/***************************************************************/index.js',
        output: {
          // 同entry
          path: '/Users/********************************************************************/dist',
          publicPath: './dist',
          filename: 'index.js'
        },
        module: {
          rules: [
            {
              test: /\.js$/,
              loader: 'babel-loader',
              exclude: /node_modules/
            },
            {
              test: /\.(png|jpg|gif|svg)$/,
              loader: 'file-loader',
              options: {
                name: '[name].[ext]?[hash]'
              }
            }
          ]
        },
        resolve: {
          alias: {
            'vue$': 'vue/dist/vue.esm.js'
          }
        },
        devServer: {
          historyApiFallback: true,
          host: '0.0.0.0',
          openPage: 'http://localhost/',
          noInfo: true
        },
        performance: {
          hints: false
        },
        devtool: '#eval-source-map'
      }
    },
    watch: {
      files: ['**/*.js'], // 监听项目内所有的js文件
      tasks: ['webpack:home'], //js文件变化则执行webpack任务中的home任务
      options: {
        livereload: true, //若是使用grunt的临时服务器，开启此项会自动reload页面
      }
    }
  });

  //导入监听功能模块
  grunt.loadNpmTasks('grunt-contrib-watch');
  //导入webpack功能模块
  grunt.loadNpmTasks('grunt-webpack');
};