webpack打包生成多页面，防止浏览器缓存

1.在目录下执行

//生成的默认的package.json,采用默认答案
npm init -y

2.安装webpack

npm install -D webpack-cli

3.新建 webpack.config.js

let path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var glob = require('glob');

let entries = getEntry();

module.exports = {
	mode: 'development',
	entry: entries,
	output: {
		filename: 'js/[name].[hash].js',
		path: path.resolve(__dirname, './dist')
	},
	devServer: {
		port: 3002,
		progress: true,
		contentBase: path.resolve('./dist')//项目启动根目录
	},
	plugins: [
		
		new MiniCssExtractPlugin({
			//输出css到指定目录
			filename: 'css/[name].css',
		})
	],
	module: {//模块
		rules: [
			{
				test: /.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
				]//css不分离写法
			},
		]
	}
}


//配置页面
var entryObj = getEntry();
var htmlArray = [];

Object.keys(entryObj).forEach(function (element) {
	htmlArray.push({
		_html: element,
		title: '',
		chunks: [element]
	})
})

//获取html-webpack-plugin参数的方法
var getHtmlConfig = function (name, chunks) {
	return {
		template: `./src/${name}/${name}.html`,
		filename: `${name}.html`,
		chunks: [name]
	}
}

console.log(htmlArray)
//自动生成html模板
htmlArray.forEach(function (element) {
	module.exports.plugins.push(new HtmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));
})


//动态添加入口
function getEntry () {
	var entry = {};
	//读取src目录所有page入口
	glob.sync('src/**/*.js').forEach(function (name) {
		var start = name.indexOf('src/') + 4;
		var end = name.length - 3;
		var eArr = [];
		var n = name.slice(start, end);
		n = n.split('/')[1];
		eArr.push('./' + name);
		eArr.push('babel-polyfill');
		entry[n] = eArr;
	})
	return entry;
}

3.文件目录

4.package.json配置项

{
  "name": "webpackdemo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "glob": "^7.1.3",
    "html-webpack-plugin": "^4.4.1",
    "mini-css-extract-plugin": "^0.11.2",
    "css-loader": "^4.3.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "jquery": "^3.3.1"
  }
}

5.执行npm run build 即可生成打包文件

github地址：https://github.com/hanhaiyuntao/webpackdemo2