webpack 启用热更新后 如何避免每次都生成描述文件json和补丁文件js

Question

var path = require("path");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack'); // 引入 webpack 便于调用其内置插件

// console.log(CleanWebpackPlugin);

module.exports = {
  devtool: 'inline-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist/js'),
        hot: true, // 告诉 dev-server 我们在用 HMR
        hotOnly: true, // 指定如果热加载失败了禁止刷新页面 (这是 webpack 的默认行为)，这样便于我们知道失败是因为何种错误
        inline:true,

    },
    entry: {
        print:'./src/js/print.js',
        index:'./src/js/index.js'
    },
    module:{
      rules:[
        {
          test:/\.css$/,
          use:['style-loader','css-loader']
        },
      ]
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
            title: 'Output Management',
            inject:'head',
            filename:'index.html',
            template:'index.html'
      }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: '[name].bundle.js',
        // chunkFilename:'[name].bundle.js',
    },
};

每次都会生成这些文件 如何配置不生成呢

Answer 1

Those HMR chunks are created by HotModuleReplacementPlugin when we use --watch flag running webpack:
webpack -d --watch

The best way I found till now is to define specific folder and file for those chunks. We can do this in the output section, for example:

output: {
    path: path.join(root, "dist"),
    filename: "bundle.js",
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json'
}

After this change, we will have only those two files created. So we can simply add them (or whole folder) to the .gitignore.

I know It's not the best solution, but I didn't found anything better for now.