[JavaScript知识库]Webpack5+Vue

查阅了近一周的的webpack5资料，并结合Vue、React的基础实践，最复杂的还是在配置，包括通用配置、开发配置和打包配置。与dojo、requirejs等相比，还是有些差异，在es6+支持和兼容方面，会更好一些。

• 开发模式

1.设置静态资源目录

devServer: {
????port: 8060,
????hot: true,
????static: ['../dist',
????????path.resolve(__dirname, '../public')]//指定静态资源路径
},

1. 静态资源调用

两种方式，尤其是使用外部配置文件和动态css文件时。

1. 在html或vue template中，直接使用相对位置加载，注意注册为静态目录的文件夹是根目录。
2. 使用脚本，动态输出到html文件中，建立一个通用的加载类vendor。

• 打包模式

静态资源打包拷贝到dist下，依然是跟目录。

new CopyWebpackPlugin({patterns:[{
????from: path.resolve(__dirname, '../public'),
????to: path.resolve(__dirname, '../dist/')
}]}),

• Vue模块化开发

1. 建立vue模板文件，包括template、script、style，script中可以引入外部类，template内容的初始化和绑定事件都在 script中完成，所有事情都在这完成，虽然直观，但不整洁！习惯js和html分离设计结构。
2. 在vue模板对应的js文件中，增加事件绑定方法，并引入其他的class。

Class类采用import导入，Define模块，采用require直接引入使用。

多模板组合的主页面中，直接引入vue模块和对于js，输出到主html页面对应的div中。

• 问题

1. 当前类继承多个模块的问题，es中class只支持继承一个父类
2. Vue模板处理类继承，即重构通用的vue响应方法。
3. Menu.vue与menu.js文件之间的相互调用，如果js文件只做输出到html页面中，没有意思，而且Menu.vue中script系列方法和menu.js中方法，在设计时如何分类，感觉有些混乱。

menu.js

new Vue({
????el: '#app',
????components:{Menu},
????template:'<Menu/>'
});