【小技巧】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');
};