Webpack

转载: https://segmentfault.com/a/1190000014085613?utm_source=channel-hottest 对自己有用,做个笔记,有兴趣可以去以上地址去看. 第一招：化繁为简的Watchers 场景还原： created(){ 　　 this .fetchPostList(); }, watch: { searchInputValue(){ 　　　　 this .fetchPostList(); } } 组件创建时需要获取一次列表,同时数据更新需要重新重新渲染列表,immediate:true表示创建组件时立马执行一次. 并且直接使用函数的字面量名称. watch: { 　　searchInputValue:{ 　　　　handler: 'fetchPostList' , 　　　　immediate: true 　} } 第二招：一劳永逸的组件注册 场景还原： import BaseButton from './baseButton' import BaseIcon from './baseIcon' import BaseInput from './baseInput' export default { components: { BaseButton, BaseIcon, BaseInput } } <BaseInput v-model

字节跳动 一面 1.说出以下代码的原型关系，以及 Object 和 Function 的原型关系 Function; function test() { } var obj = new test(); __proto__ prototype 2.合并两个已排序的链表：递归解法、迭代解法 3.判断数组类型有哪些方法 4.webpack 常用 loader、plugin 5.Promise 中抛出异常能否被 catch 捕获？ let promise = new Promise((resolve, reject) => { throw new Error() reject() }) promise.catch(err => { console.log(err) }) 6.冯诺依曼体系讲讲 7.线程与进程的区别 8.操作系统为什么要设计用户态和内核态？ 二面 1.讲讲模块化规范 2.import 和 require 的区别 3.require 是如何解析路径的？ 4.模拟实现 new 操作符 5.算法：找出字符串中第一个不重复的字符 6.promise 考察 /* 用 promise 实现以下功能。 具体： fn1和fn2都是异步函数，f1、fn2同时执行，并且fn1、fn2的结果是 fn3的参数。当fn1或者fn2发生错误时，fn3照常执行，此时的参数为空。 */ eg: fn1 =

问题一：assetsPublicPath配置错误 解决办法：打开config/index.js文件 build:{ // assetsPublicPath: '/' assetsPublicPath: './' } 问题二：路由history模式配置有误 router/index.js 解决办法：关闭路由historym模式 export default new Router({ // mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap }) 执行npm run build之后显示空白页面 阅读数 2858 最近在学习使用webpack，在项目最后打包过程，执行npmrunbuild之后得到的dist目录放到服务器上打开，显示空白页面，但是标题能正常显示，查看控制台发现是数据位置请求报错，查阅资料后知道是... 博文 来自： YooHoeh的博客 关于reactjs在windows环境中使用npm run build之后,打开网页显示为空白的解决方案 来源： oschina 链接： https://my.oschina.net/u/4290613/blog/3396561

单文件组件介绍 vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立的组件，所以成为单文件组件； vue文件结构 由于.vue封装了html、js、css的代码，所以它由以下几部分组成； <template> html </template> <script> js </script> <style> css </style> vue-loader： 如果使用.vue文件，需要使用指定加载器，否则浏览器是不能解析的。加载.vue文件的加载器是 vue-loader； 同理，一个项目中还需要html、css等，所以也要用到其对应的加载器 例：html-loader、css-loader… vue-loader是基于webpack的，要在webpack中进行配置，所以还要配置webpack； webpack： javaScript应用的静态模块打包器；把前端各种资源作为模块处理、使用、打包； 官网： 点击前往 单文件组件项目结构与依赖安装 创建项目结构 基于webpack的单文件组件项目基本结构 1、index.html 基本页面 2、App.vue vue根组件 3、 main.js 入口文件 4、package.json 项目配置文件 5、webpack.config.js webpack配置文件 6、 .babelrc

webpack在build包的时候，有时候会遇到打包时间很长的问题，这里提供了一个解决方案，让打包如丝般顺滑~ 1. 介绍 在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react ， lodash ， vue 我们希望能和自己的代码分离开，Webpack 社区有两种方案 CommonsChunkPlugin DLLPlugin 对于 CommonsChunkPlugin ，webpack 每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而 DLLPlugin 则是能把第三方代码完全分离开，即每次只打包项目自身的代码。Dll这个概念是借鉴了Windows系统的dll，一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。 2. 模板webpack-simple 用法 要使用 DLLPlugin ，需要额外新建一个配置文件。所以对于用这种方式打包的项目，一般会有下面两个配置文件 webpack.config.js webpack.dll.config.js 在项目根目录新建一个文件 webpack.dll.config.js const path = require('path'); const webpack = require('webpack'); module.exports = {

如果使用中文webpack文档做代码分离，会有报错，报错详情是： Error : webpack .optimize .CommonsChunkPlugin has been removed , please use config .optimization .splitChunks instead . 解决办法可以参考官方英文文档：https://webpack.js.org/guides/code-splitting/ 具体实现如下：如下optimization配置 module.exports = { entry : { app : "./src/index.js", another : './src/another-module.js' }, plugins : [ new HtmlWebpackPlugin ({ title : "code Splitting " }), ], optimization : { splitChunks : { chunks : 'all' } }, output : { filename : "[name].bundle.js", path : path.resolve (__dirname, 'dist') }, }; 然后执行npm run build，运行结果如下： 在这里生成了一个名字为 vendors~another

点击上方“ 逆锋起笔 ”， 公众号回复 PDF 领取大佬们推荐的学习资料 作者 | Mahdhi Rezvi 译者 | 王强 策划 | 李俊辰 这篇文章列举了一些技巧，可帮助你写出更好的 JavaScript 代码，从而提高性能。 本文最初发布于 Medium 网站，经原作者授权由 InfoQ 中文站翻译并分享。 JavaScript 已经成为有史以来最受欢迎的编程语言之一。从 W3Tech 的数据来看，全世界将近 96％的网站都在使用它。关于 Web 有一个关键的事实是，你无法控制访问网站的用户所用设备。当用户访问你的网站时，使用的可能是高端设备也可能是低端设备，网络连接条件也有好有差。这意味着你必须尽可能优化自己的网站，以满足任何用户的需求。 附带提一下，请共享和重用你的 JS 组件，以在高质量代码（写起来需要花费时间）和合理的交付时间之间保持适当的平衡。你可以使用 Bit 等流行工具将任何项目中的组件（普通 JS、TS、React、Vue 等）共享到 Bit 的组件中心，用不了多大功夫。 1、删除未使用的代码和功能 你的应用程序包含的代码越多，就需要将更多的数据传输到客户端。浏览器也需要更多时间来分析和解释代码。 有时，你可能打包了很多根本用不到的功能。最好只在开发环境中保留这些额外的代码，而不要将其推送到生产环境中，以免给客户端的浏览器增加负担。 要不断问自己

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：https://github.com/vuejs/vue-cli vue/cli 3.x 已经发布，如果使用 3.x 构建项目，请参考《Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目》 一、 安装 node.js 首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。 只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399 安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。 二、安装 vue-cli 安装好了 node，我们可以直接全局安装 vue-cli： npm install -g vue-cli 但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org 如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中