[Tip] Use Grunt to listen for file changes in Webpack projects
Sharing background: When writing the NPM plug-in, references in the test HTML file in the project need to be translated from the entry file and packaged into ES5. Therefore, each change in the test needs to be manually run and build by NPM, which is very troublesome. I learned that Grunt has a watch function. After a while, it can automatically build a wave every time the JS file changes, which is very intelligent.
Installing dependency packages
// Install grunt NPM I grunt --save-dev // Grunt -contrib-watch, NPM I grunt-contrib-watch --save-dev // grunt-loadNPMTasks NPM I grunt-loadNPMTasks --save-dev //grunt-webpack --save-dev to register NPM I grunt-webpack --save-devWrite the gruntfile.js configuration file
Module. exports = function(grunt) {grunt. InitConfig ({// Configure Webpack: {home: {// entry to fill in the system file path, remember entry: '/ Users / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / index in js', the output: {/ / entry with the 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'], // Listen for all js tasks: ['webpack:home'], // Execution the home task in the webpack task when the js file changes: Options: {livereload: True, // This will automatically reload the Grunt server}}}); LoadNPmTasks ('grunt-contrib-watch'); // Import Webpack function module grunt.loadNPMTasks ('grunt-webpack'); };