1.webpack 如何分离app(应用程序)和vendor(第三方库)入口？
webpack.config.js
module.exports = {
entry: {
main: './src/app.js',
vendor: './src/vendor.js',
},
};
webpack.prod.js
module.exports = {
output: {
filename: '[name].[contenthash].bundle.js',
},
};
webpack.dev.js
module.exports = {
output: {
filename: '[name].bundle.js',
},
};
说明： 这样配置是想要配置2个单独的入口点， 解决的问题打包时vendor中引入模块打包在一起成为单独的chunk,内容哈希保持不变，这使浏览器可以独立缓存他们，从而减少加载时间。
Tip:
在 webpack < 4 的版本中，通常将 vendor 作为一个单独的入口起点添加到 entry 选项中，以将其编译为一个单独的文件（与 CommonsChunkPlugin 结合使用）。
而在 webpack 4 中不鼓励这样做。而是使用 optimization.splitChunks 选项，将 vendor 和 app(应用程序) 模块分开，并为其创建一个单独的文件。不要 为 vendor 或其他不是执行起点创建 entry。）
webpack常用的用的plugins
- html-webpack-plugin ：根据同一个模板生成多个页面
- extract-text-webpack-plugin
- UglifyJSPlugin ： js压缩插件
- CommonsChunkPlugin ： 把多个页面中公用的文件抽出
- clean-webpack-plugin ： 打包过程前清除以前的文件
- copy-webpack-plugin:
常用loader解析器
- css-loader （解析css文件）
- sass-loader/less-loader/node-sass （预编译解析）
- file-loader/url-loader 解析图片（png，jpg/svg/gif）
- 给css添加前缀： postcss-loader，autoprefixer
loader执行顺序
loader是文件加载器； loader是从右至左调用的
plugin执行
在webpack运行的生命周期中会广播出许多的事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出的结果；
执行顺序:webpack启动后，在读取配置的过程中会执行new myplugin()初始化一个myplugin获取实例，在初始化compiler对象后，就会通过compiler.plugin监听到webpack广播出来的事件
2.vue data数据中对象内容更改没有触发组件更新
解决方式
// 假设
export default {
data() {
return: {
obj: {
a: 1,
b: 2,
}
}
},
mounted() {
this.obj.c = 3 // 这样再插入数据时，对象本身没有改变，也就意味着vue检测不到数据内存指向做更改，导致插入的数据不具备`getter/setter`的属性
Object.assign(this.obj, { c: 3 }); //这种方式替换一个内存指向完成数据变化
this.$set(this.obj, "c", "2"); // 通过vue实例提供的$set方法，在不改变指向的同时，添加一个具备getter/setter属性的值
}，
}
3. vue 动态渲染组件方式
我们之前曾经在一个多标签的界面中使用 is attribute 来切换不同的组件：
<component v-bind:is="currentTabComponent"></component>
注解： 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。
4.高阶函数
函数的参数是函数，或者函数的返回值是函数
5.git的操作
git fatch
git stash
网友评论