![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack
XU丶WEI
这个作者很懒,什么都没留下…
展开
-
vue2.0脚手架的webpack 配置文件分析
最近在项目中遇到了一个问题,不知道为什么,所以最后通过动手做demo实践、查文档的方式解决了,这里做一个总结。http://www.cnblogs.com/zhuzhenwei918/p/6893496.html 例1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <s转载 2017-07-24 14:17:10 · 646 阅读 · 0 评论 -
towebp-loader诞生记~ 一个webpack 图片loader
http://www.jianshu.com/u/9760e0846302在上篇Vuejs webp图片支持,插件开发过程~ 中我做了一个图片转换成webp的组件,并且使用了相关的loader,但是我们在使用过程中发现webp和原图的hash是不一样的,这样我们就没有办法保留版本的概念了,临时我使用时间戳来作为替代,但是这样每次上传都会重新上传所有文件,有点浪费硬盘,于是我今天做了这个towebp转载 2017-06-06 19:04:59 · 385 阅读 · 0 评论 -
Webpack 配置中的一股清流
http://www.tuicool.com/articles/rYzuquJ网络上很多文章真的是很糟糕鸡肉鸭肉乱炖,包括早期webpack官方的文档,一套完整的配置教程要看个半天,配置起来更是麻烦!本文使用webpack1,其实跟版本2没多大改变,但是某些插件会导致报错,使用小心。Git: https://github.com/asd0102433/blog喜欢的朋友star支持一下,不断更新第一转载 2017-06-06 19:04:34 · 306 阅读 · 0 评论 -
Webpack 2和模板打包的初学者指南(上)
Webpack是模块打包工具。http://www.tuicool.com/articles/mIRnEjUWebpack 已成为现代Web开发最重要的工具之一。首先,它是一个JavaScript模板打包工具,他能转换所有的前端资源,如HTML和CSS,甚至图片。它可以让你更好地控制你应用程序的HTTP请求数量,并允许你使用其他的风格资源(如Jade,Sass和ES6)。Webpack还允许你轻松地转载 2017-06-06 19:03:38 · 634 阅读 · 0 评论 -
100 分钟 webpack 2.0 入门视频教程
webpack 作为目前前端开发必备的框架。webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的,我上传到了优酷上供大家学习参考使用。这个基本就是 webpack 2.0 最好的学习视频了,希望可以对新手或者复习知识的朋友有用。Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块转载 2017-06-06 19:03:12 · 3375 阅读 · 1 评论 -
Webpack入门之遇到的那些坑,系列示例Demo
前言网上关于webpack的教程已经数不胜数了,也无意再重新写一篇复制文。但是实际操作过程中,发现各种教程版本都不一致,有的教程已经过时了,有的教程模糊不清,因此还是遇到了各种问题,因此特将自身实际操作过程中遇到的问题记录下来,也希望能给他人带来帮助!https://dailc.github.io/2017/03/13/webpackfreshmanualAndBug.html?utm_source转载 2017-06-06 19:02:54 · 435 阅读 · 0 评论 -
【webpack】-- 自动刷新与解析
http://www.cnblogs.com/stoneniqiu/p/6444960.html前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整;而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下;另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们常常需要在本地用nginx建一个站点来观察(自己电脑上ok了才放到测试环境去)。所以如果要用手工刷新浏览器转载 2017-06-06 19:01:56 · 613 阅读 · 0 评论 -
【webpack】-- 入门与解析
每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档。 webpack是基于node的。先安装最新的node。1.初始化安装node后,新建一个目录,比如html5。cmd中切到当前文件夹。npm init -y 这个命令会创建一个默认的package.json。它包含了项目的一些配置参数,通过它可以进行初始安装。详细参数:https://docs.npmj转载 2017-06-06 19:01:32 · 366 阅读 · 0 评论 -
【webpack】-- 样式加载
http://www.cnblogs.com/stoneniqiu/p/6534538.html主题 Webpack CSSbody { background: cornsilk;}然后在index.js中引入import './main.css';再运行npm start,在http://localhost:8080/中打开这时候页面出现了背景色,而且发现样式写入了header中,转载 2017-06-06 19:01:08 · 341 阅读 · 0 评论 -
webpack-- 模块热替换
全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新。这个功能主要是用于开发过程中,对生产环境没有任何帮助(这一点区别.net热插拔)。效果上就是界面的无刷新更新。HMR基于WDS,style-loader可以通过它来实现无刷新更新样式。但是对于JavaScript模块就需要做一点额外的处转载 2017-06-06 19:00:45 · 299 阅读 · 0 评论 -
webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表:webpack入坑之旅(一)不是开始的开始webpack入坑之旅(二)loader入门webpack入坑之旅(三)webpack.config入门webpack入坑之旅(四)扬帆起航webpack入坑之旅(五)加载vue单文件组件we转载 2017-06-06 19:00:02 · 534 阅读 · 0 评论 -
webpack入坑之旅(六)配合vue-router实现SPA
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表:webpack入坑之旅(一)不是开始的开始webpack入坑之旅(二)loader入门webpack入坑之旅(三)webpack.config入门webpack入坑之旅(四)扬帆起航webpack入坑之旅(五)加载vue单文件组件we转载 2017-06-06 18:59:39 · 316 阅读 · 0 评论 -
webpack入坑之旅(二)loader入门
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表:webpack入坑之旅(一)不是开始的开始webpack入坑之旅(二)loader入门webpack入坑之旅(三)webpack.config入门webpack入坑之旅(四)扬帆起航webpack入坑之旅(五)加载vue单文件组件we转载 2017-06-06 18:59:09 · 324 阅读 · 0 评论 -
webpack入坑之旅(四)扬帆起航
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表:webpack入坑之旅(一)不是开始的开始webpack入坑之旅(二)loader入门webpack入坑之旅(三)webpack.config入门webpack入坑之旅(四)扬帆起航webpack入坑之旅(五)加载vue单文件组件we转载 2017-06-06 18:58:44 · 224 阅读 · 0 评论 -
webpack入坑之旅(三)webpack.config入门
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表:webpack入坑之旅(一)不是开始的开始webpack入坑之旅(二)loader入门webpack入坑之旅(三)webpack.config入门webpack入坑之旅(四)扬帆起航webpack入坑之旅(五)加载vue单文件组件we转载 2017-06-06 18:57:53 · 193 阅读 · 0 评论 -
webpack独立打包与缓存处理
前言http://www.cnblogs.com/luozhihao/p/6623819.html?utm_source=tuicool&utm_medium=referral先前写了一篇webpack入门的文章《webpack入门必知必会》,简单介绍了webpack拆分、打包、压缩的使用方法。本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法。上篇文章中写转载 2017-06-06 19:05:25 · 229 阅读 · 0 评论 -
基于webpack的模块化构建
写在前面http://jafeney.com/2016/02/02/2016-02-02-webpack/模块化构建会让项目的拓展性、代码复用性和可维护性大大提高,初期可能会增加一些管理的工作量。但是对长远来说绝对是值得的,一个良好的模块化方案会让维护工作变得轻松,这个好处项目越进展到后来越明显。而且模块化构建的框架和工具很多,RequireJS、SeaJS、Grunt、Gulp等,这些虽然成熟稳定转载 2017-06-06 19:05:49 · 440 阅读 · 0 评论 -
用 webpack 实现持久化缓存
什么是持久化缓存?原文链接https://sebastianblade.com/using-webpack-to-achieve-long-term-cache/缓存(cache)一直是前端性能优化的重头戏,利用好静态资源的缓存机制,可以使我们的 web 应用更加快速和稳定。仅仅简单的资源缓存是不够的,我们还要为不断更新的资源做持久化缓存(Long term cache)。以前我们能利用服务端模板转载 2017-06-07 11:57:52 · 534 阅读 · 0 评论 -
如何在 webpack 中引入未模块化的库,如 Zepto
前言原文链接: https://sebastianblade.com/how-to-import-unmodular-library-like-zepto/最近我在研究多页面 webpack 模块打包的完整解决方案时,发现用 import 导入 Zepto 时,会报 Uncaught TypeError: Cannot read property 'createElement' of und转载 2017-06-07 11:57:11 · 798 阅读 · 0 评论 -
使用webpack和babel搭建react开发环境
译文,原文来自 https://scotch.io/tutorials/s…http://www.tuicool.com/articles/MrUfUjQ写在前面,使用webpack已经蛮长一段时间,但是在新项目开始之际,都是东拼西凑其他项目的配置来使用,如果要自己从零开始写一个完整项目的webpack配置估计得费死劲,所以在webpack发布2.x版本之际,正是时候来认真 从零开始学习webpa转载 2017-06-07 11:56:37 · 487 阅读 · 0 评论 -
webpack与browser-sync热更新原理深度讲解
本文首发于CSDN网站,下面的版本又经过进一步的修订。https://juejin.im/post/58f7fc7da0bb9f00659f7133原文:webpack与browser-sync热更新原理深度讲解本文包含如下内容:webpack-hot-middlewareEventSourceCORSnginx配置browser-syncWebSocket支持性Frame建立连接服务端实现发送转载 2017-06-07 11:56:01 · 806 阅读 · 0 评论 -
史上最详细的webpack 讲解2 (DefinePlugin中的淫技巧)
今天我突然发现我的掘金原创排行已经落到了120位,这是什么原因,因为我分享的不够多,还是我分享的不够好,看的人不多,又好几天没和大家几面了,来吧!死也死在分享上面,怎么说呢,今天讲解的东西也不是很深奥的东西,以前一直没有用到这东西,今天好好看了这东西,可以带来很大的方便,我就给大家举两个例子玩玩我什么都不要我只要赞今天我就不详细的列出创建目录结构了,看过我webpack 讲解1 – 讲解的还是继续原转载 2017-06-07 11:53:04 · 393 阅读 · 0 评论 -
react+webpack项目常用的插件(plugins)
一、HtmlWebpackPlugin使用:http://www.tuicool.com/articles/fq2qQrNnpm install html-webpack-plugin --save-dev解释:这个插件是简化创建生成html(h5)文件用的,如果你引入的文件带有hash值的话,这个尤为的有用,不需要手动去更改引入的文件名!默认生成的是index.html,基本用法为:var转载 2017-06-07 11:53:00 · 883 阅读 · 0 评论 -
史上最详细的 webpack 讲解 1 (vue-cli 中 build.js)
看过我vue.js系列课程的人,基础会的就都该会了,进阶牛B点的也很牛B了,但是对vue这一块我还是会持续有新的想法和学习到的东西我还是会一直进行分享,但是今天又是一个史上的文章出来了,虽然有点标题党,但是我看了一系列的教程,就是讲其一,其二最重要的就是直接忽略,有些教程直接就是把vue-cli给把功能标注一下,几个字告诉你是大概干麻的,就算跟着大概意思的理解,我也能知识大概是干麻的,本质上并没有l转载 2017-06-06 19:07:44 · 776 阅读 · 0 评论 -
使用 react-hot-loader
经过 @assassin_cike 提醒有这样一个loader,今天试了一下真的非常好用。https://segmentfault.com/a/1190000004660311hot loader 是干嘛的呢?引用官网的一句话就是React Hot Loader is a plugin for Webpack that allows instantaneous live refresh witho转载 2017-06-06 19:07:19 · 344 阅读 · 0 评论 -
原创超清的 Webpack2 视频教程
100 分钟 webpack 2.0 入门视频教程http://blog.parryqiu.com/2017/04/05/webpack2-tech-lesson/?utm_source=tuicool&utm_medium=referralwebpack 作为目前前端开发必备的框架。webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的,我上传到了优酷上供大家学习参考使用转载 2017-06-06 19:06:55 · 713 阅读 · 0 评论 -
如何十倍提高你的webpack构建效率
前言http://jafeney.com/2016/07/10/2016-07-10-webpack/ webpack 是个好东西,和 NPM 搭配起来使用管理模块实在非常方便。而 Babel 更是神一般的存在,让我们在这个浏览器尚未全面普及 ES6 语法的时代可以先一步体验到新的语法带来的便利和效率上的提升。在 React 项目架构中这两个东西基本成为了标配,但 commonjs 的模块转载 2017-06-06 19:06:13 · 311 阅读 · 0 评论 -
webpack入坑之旅不是开始的开始
最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅。因为原来没有用过任何的构建工具与模块化工具,所以本系列会十分的基础。并且可能有很多不正确的地方,希望大家谅解,并指出错误帮助改进。谢谢!转自个人博客:原地址这是一系列文章。此系列所有的练习都存在了我的github转载 2017-06-05 15:58:19 · 281 阅读 · 0 评论 -
webpack学习
webpack安装npm install webpack -g我们还可以直接安装到项目的依赖里,就是写入package.jsonnpm initnpm install webpack –save-dev简单一个小案例:在一个文件夹下新建index.html,main.js以及webpack.config.js文件index.html:<!DOCTYPE html><html lang="e转载 2017-06-05 15:56:56 · 270 阅读 · 0 评论 -
从头创建一个基于 React, webpack, babel 的模板项目
如果是一个刚接触 React 的新手,当学完了 React 的各种基本概念和语法之后,准备开始实际的开发工作时,他又会碰到各种新颖的名词:npm, webpack, babel, flux, es2015…… 如果以前接触过这些工具还好,否则为了建立一个简单的项目,还需要学习这一整套的流程,而在这中间又会碰上各种坑,这个过程将会非常痛苦。一个解决方案是去 GitHub 上寻找各种模板项目,用 Rea转载 2017-06-05 14:36:40 · 365 阅读 · 0 评论 -
webpack+vue起步
webpack与vue起步 2016-05-31 VUE VUEhttp://mrzhang123.github.io/2016/05/31/webpack-vue-2/记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译vue的文档,从那时候开始到现在,看了几次vue的教程,每次都有更深的理解,因为之前并没有研究过angular等框架,所以对MVVM并不是很了解,但是经过这段时间转载 2017-06-05 14:35:35 · 376 阅读 · 0 评论 -
webpack入坑之旅
webpack入坑之旅(一)不是开始的开始最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅。因为原来没有用过任何的构建工具与模块化工具,所以本系列会十分的基础。并且可能有很多不正确的地方,希望大家谅解,并指出错误帮助改进。谢谢!这是一系列文章,此系列所有的练习都存转载 2017-06-04 22:56:51 · 204 阅读 · 0 评论 -
基于 Webpack & Vue & Vue-Router 的 SPA 初体验
2016-09-08 马晓东 腾讯Bugly最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,AngularJS 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 vue 发展势头更猛,尤其是即将 release 的2.0版本,号称兼具了 angularjs 和 reactjs 的两者优点。不过现在的官方版本还是1.0 ,下面就是基于转载 2017-06-04 22:56:08 · 273 阅读 · 0 评论 -
webpack+ES6+less开发环境搭建(附带视频教程)
webpack是什么https://cnodejs.org/topic/571f4e785a26c4a841ecbd7cWebpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。百度网盘视频下载:http://pan.baidu.com/s/1jIPJucu百度网盘在线观看:http://pan.baidu.com/share/link?s转载 2017-06-04 22:55:33 · 574 阅读 · 0 评论 -
深入浅出React(二):React开发神器Webpack
http://www.infoq.com/cn/articles/React-and-webpack/编者按:自2013年Facebook发布以来,React吸引了越来越多的开发者,基于它的衍生技术,如React Native、React Canvas等也层出不穷。InfoQ精心策划“深入浅出React”系列文章,为读者剖析React开发的技术细节。上一篇我们对React有了一个总体的认识,在介绍其转载 2017-06-04 22:54:32 · 386 阅读 · 0 评论 -
React+Webpack快速上手指南
前言http://www.jianshu.com/p/418e48e0cef1这篇文章不是有关React和Webpack的教程,只是一篇能够让你快速上手使用目前这两种热门技术的前端指南,并假设你对两者有一个基本的认识。如果你想先行了解下React,可以放肆的移步至React官方教程,如果你已经使用了其他的模块加载与资源打包技术,不妨也来看看 Webpack 提供的思路。webstorm+reac转载 2017-06-04 22:49:21 · 411 阅读 · 0 评论 -
一小时包教会 —— webpack 入门指南
什么是 webpack?http://www.w2bc.com/Article/50764http://www.zhihu.com/question/39290543webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块,即使它转载 2017-06-04 22:48:20 · 396 阅读 · 0 评论 -
一小时包教会 —— webpack 入门指南
什么是 webpack?http://www.w2bc.com/Article/50764http://www.zhihu.com/question/39290543webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块,即使它转载 2017-06-04 22:47:19 · 196 阅读 · 0 评论 -
精益 React 学习指南 (Lean React)- 2.2 webpack
https://segmentfault.com/a/11900000056125062.2 webpack这一节中我们将系统的讲解 webpack ,包括:webpack 介绍webpack 是什么为什么引入新的打包工具webpack 核心思想webpack 安装webpack 使用命令行调用配置文件webpack 配置参数entry 和 output单一入口多个入口多个打包目标转载 2017-06-04 22:46:12 · 388 阅读 · 0 评论 -
webpack 从入门到上线
https://segmentfault.com/a/1190000006649986webpack 是什么一项技术、一个工具的出现,肯定是为了解决问题的。那么,webpack 是为了解决什么问题?答案是:文件依赖管理。我们在浏览器中的 js 中,不能直接引用其它 js, css 等文件(或说,模块)。而 webpack 就是用来解决这个问题的,让你的项目可以很好地分文件、分模块,而且它对外部文转载 2017-06-04 22:45:36 · 387 阅读 · 0 评论