使用webpack遇到的问题

1.清理 /dist 文件夹
使用官网上给的代码运行时会报错

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

查看网上解决办法，把加号部分代码改为如下，则运行成功

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
	entry: {
		app: './src/index.js',
		print: './src/print.js'
	},
	plugins: [
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin({
			title: 'Output Management'
		})
	],
	output: {
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
};

2.HtmlWebpackPlugin是解决更新html文件的插件
3.webpack-dev-server的作用是提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。
4.模块热替换(Hot Module Replacement 或 HMR)允许在运行时更新各种模块，而无需进行完全刷新。例如当修改css文件时，页面的样式会自动更新，无需刷新。