转载于:https://segmentfault.com/a/1190000014148611?utm_source=tag-newest 概念问题一:什么是webpack和grunt和gulp有什么不同 答案:Webpack是一个模块打包器,他可以递归的打包项目中的所有模块,最终生成几个打包后的文件.他和其他的工具最大的不同在于他支持code-splitting.模块化(AMD,ESM,CommonJs).全局分析. 概念问题二:什么是bundle,什么是chunk,什么是module? 答案

问题描述: 本地启了两个服务:A(http://localhost:8001) B(http://localhost:8000),A 项目要怎么才能关联到 B 项目,也就是 A 项目请求怎么跳到 B 项目? 解决方法: 用一个代理软件,监听一个端口,把不同的 URL 转发给不同的后端. 1.用 nginx ,配置最方便.(暂时不会,先不展开叙述) 2. webpack-dev-server.随便写一个 webpack 配置文件,不用干什么实际的活,在 dev-server 里配置一下 proxy

简介 在大型应用里,有些组件可能一开始并不显示,只有在特定条件下才会渲染,那么这种情况下该组件的资源其实不需要一开始就加载,完全可以在需要的时候再去请求,这也可以减少页面首次加载的资源体积,要在Vue中使用异步组件也很简单: // AsyncComponent.vue <template> <div>我是异步组件的内容</div> </template> <script> export default { name: 'AsyncComponen

HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行). 为何使用它 简单来说,HtmlWebpackPlugin是用于生成html文件.我们的疑问可能在于,webpack本身不能生成html文件吗?事实上,默认的webpack主要是用于处理js文件的依赖图构建和打包,当需要生成html文件时,便需要使HtmlWebpackPlugin插件. 如何安装 作为开发依赖安装即可: n

前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理……不忍直视2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的……3.数据的渲染使用模板引擎,这就意味着你要

开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实践的过程中要去不断访问的5.ES6语法 另外,这套教程的代码都在我的github上,读者可以对照着代码来看,不过还是希望大家自己亲手搭建,体验这个过程,git地址: git地址 前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会

最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 说说React 一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件.比如日常写一个组件,比较常规的方式: 通过前端模板引擎定义结构 JS文件中写自己的逻辑 CSS中写组件的样式 通过RequireJS.SeaJS这样的库来解决模块之间的相互依赖 那么在React中是什么样子呢?

一.自我初级认知  (是什么?     能干什么,有卵用?       有选择为什么要选你?(比较优势在哪) )     适合的才是最好的 模块打包器(module bundler)     根据项目需求合并代码,并且支持按需加载. 1.将混在页面中的图片文件.js文件.css文件抽取出来,解除依赖. 2.模块系统主要解决模块的定义.依赖和导出. 3.全局作用域下,也就是定义在 window 对象中. 4.webpack实现的功能: a:将依赖树拆分成按需加载的块 b:初始化加载的耗时尽量少 c

最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 <!-- more --> 说说React 一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件.比如日常写一个组件,比较常规的方式: - 通过前端模板引擎定义结构 - JS文件中写自己的逻辑 - CSS中写组件的样式 - 通过RequireJS.SeaJS这样的库来解决模块之间

.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6rem !important;} 本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟.哈哈,没耐心的直接戳我到高潮部分. 理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(

开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.ES6语法 前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着"不听老人言,吃亏在眼前"的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,

1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装webpack项目模版 vue init <template-name> <project-name> 比如: vue init webpack my-project   之后可以在当前目录下下载该模版,然后 npm install 安装所有的依赖包,可以得到如下的目录结构   3.目

阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写js代码更加得心应手,比如class,let,for...of promise等等这样的,但是可惜的是这些js新特性只被最新版本的浏览器支持,但是低版本浏览器并不支持,那么低版本浏览

开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack12.Vue.js13.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实践的过程中要去不断访问的5.ES6语法 另外,这套教程的代码都在我的github上,读者可以对照着代码来看,不过还是希望大家自己亲手搭建,体验这个过程,git地址: git地址 前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有

1.nodejs的方式:commonjs  var xx =require()   modules.exports=xxxx 注意:这种方式引入模块,路径会遵循node的规则,和js的src路径规则不同. 规则参考:http://www.ruanyifeng.com/blog/2015/05/require.html 2.ES6的import和export关键字 和commonjs等价,会被babel转换成方式1 3.AMD方式: require([依赖],function(注入){   })

一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西火了,首先得知道为什么要用它,它究竟是来干什么的,它有什么好处.webpack 顾名思义,就是web打包,主要是打包一些前端资源的,再通俗点讲,就是把前端用的一些js,css压缩混淆,images fonts什么的也做相应处理,这只是webpack其中的一点功能,对于初学者来说,先知道这些就行了.

上一片博文主要让大家了解下究竟webpack是干什么的,明显它是专注于打包的. gulp  和  webpack  的区别 gulp,要求我们一步步写task(es6编译.css压缩.图片压缩.打包...),全过程都是我们掌控的(一开始项目小的时候,我们觉得灵活,但是后来项目复杂度上来了,我们觉得这样写task也太恶心了). webpack,只要写好配置文件,就会帮我们处理好各种零散的html.css.js(这里包括它们的预编译语言例如jade.sass.es6.typescript等),然后打

Webpack vs Gulp 谁会被拍死在沙滩上   本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟.哈哈,没耐心的直接戳我到高潮部分. 理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 前端开发就是在不断的 123..123..123.... 循环

  本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 webpack创建项目的玩法 五 element-ui的使用 六 xxx 七 xxx 八 xxx 一 vue获取原生DOM的方式$refs 之前我们获取dom是通过原生js或者jQuery的选择器来获取的,那么vue也给我们提供了一些获取dom的方法. 方式:给标签或者组件添加ref属性,将来我们通过this.$refs属性可以获取到这个标签或者组件. <div ref="chao"

理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 前端开发就是在不断的 123..123..123.... 循环中进行的,上面的后两步(也就是 2 和 3)应该是 自动化 的,前端开发者理应只需关注第 1 步——写业务逻辑代码. 自动化的事情应该交由构建工具来做,时下流行的前端构建工具有 gulp 和 webpack(有人说 webpack 不算是