1配置项目运行路径
webpack 的htmlwebpackplugin使用自定义模板。htmlwebpackplugin这个插件可以用来生成静态的html文件。默认内部是通过后台来生成一个html的文件。当然也可以自己使用自己的文件来生成模板。可以支持.html文件。也可以使用其他类型的模板。
公司项目是多项目放入一起的，但公共一个index.html（单页面项目），不同项目配置时会出现冲突，此时需要在配置中对运行的项目配置指定的index.html。
image.png
首先新建index.html在指定项目内，
image.png
webpack.dev.conf.js此处为项目切换的配置，切换项目时，修改此处名字，同步修改webpack的html配置路径。module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。
image.png
在webpack.dev.conf.js引入暴露的参数并赋值。下方
image.png
//html配置,index我们保留了根目录访问路径
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/view/index/index.html',
inject: true,
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'login/login.html', //http访问路径
template: './src/view/login/login.html', //实际文件路径
inject: true,
chunks: ['login']
})
配置好动态路径后运行查看页面是否加载。
2配置项目打包的html路径
在webpack.prod.conf.js文件内同理修改打包的htm路径。
image.png
打包查看是否正确。
