webpack4搭建多页面应用以及代码复用

前言

在开发类似官网这类项目时，一般不会使用框架，1是因为框架体积大且官网这类项目业务逻辑比较少，基本上是静态页面，2 是不利于SEO，所以只能自己用webpack从头搭建，正好最近公司在做新的官网，因此在这里记录一下webpack4的一些配置和优化。

GitHub完整项目地址

1.多入口并自动生成html

entry: {
   
	index: "./src/js/index.js", // 首页
	about: "./src/js/about.js", //关于我们
},
plugins: [
  // 自动清空dist目录
  new CleanWebpackPlugin(),
  // 设置html模板生成路径
  new HtmlWebpackPlugin({
   
  	filename: 'index.html',
  	template: './src/views/index.html',
  	chunks: ['index']
  }),
  new HtmlWebpackPlugin({
   
  	filename: 'about.html',
  	template: './src/views/about.html',
  	chunks: ['about']
  }),
    ],
// 编译输出配置
output: {
   
	// js生成到dist/js，[name]表示保留原js文件名
	filename: 'js/[name.[hash].js',
	// 输出路径为dist
	path: path.resolve(__dirname, 'dist')
}

** 注意：在打包生产环境时，需在output添加publicPath属性，否则无法解析到资源目录 **

output:{
   
	...,
	publicPath: './'
}

当页面较多时，可以使用动态加载文件的方式来引入：

const fs = require("fs");
let htmlPlugins = [];
const files