写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失:如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的大门. //一个常见的Webpack配置文件 var webpack = requir…

注意事项: 1. webpack不用装在全局环境下,在哪个项目中使用,就安装在该项目下即可 1. 问题一:npm init 初始化一个项目后,添加webpack.config.js文件,在该项目中通过 npm install webpack --save-dev 将npm包安装到该项目下面, 然后在项目的根目录下执行  webpack命令 报下面的错误 原因:虽然项目中安装了webpack但是在项目的根目录下执行  webpack 执行的仍是全局的webpack  因为全局没有安装 webpac…

概述: 鉴于本人初学,使用的编译器是webStorm,需添加对VUE的支持,添加方法可以参考 http://www.jianshu.com/p/142dae4f8b51. 起步: 1. 扎实的 JavaScript.HTML . CSS 基本功,这是接触vue的前提条件. 2. 学习vue官方的基础内容.不要构建工具webpack,只是页面<script>引入vue.js,把基础教程里的例子模仿练习,理解用法.如果没有 Node/Webpack 基础,不建议直接用 vue-cli 构建项目.…

本人菜鸟一枚,最近一直在研究webpack的使用,记录下自己的学习体会,由于网上关于webpack的资源(技术博客)太多,对于初学webpack的新手来说,看着五花八门的技术博客,真是头晕眼花(可能是列举的示例太深奥,一时无法理解),入了很多的坑,建议还是从技术文档看起,里面的例子都是相对简单易懂的,链接:http://webpackdoc.com/install.html 至于什么是webpack,网上有很多文章都有详细的解释:http://www.cnblogs.com/vajoy/p/46…

gulp 真正“流程”化工具 我记得实习刚刚进公司看到grunt,还是有点蒙,之前一直是本地开发,游览器F5,没想到前端也需要“编译工具”.所以grunt一直给我的感觉是“编译工具”,你写的很多代码还不能直接“执行”,需要这一个工具去“编译”才能上线.它去自动化了很多东西,我之后也写过一个公司用的grunt插件,只需要配置,之后加入任务执行,很方便.但当我看到gulp的代码的时候(还没开始看文档,API),我突然意识到很多grunt“不自然”的设计,gulp真正的做到了清晰的流程化的构建. gu…

本文译自Webpack - The Confusing Parts,原文需FQ. Webpack现在是React应用程序标配的模块打包器,我估计Angular2和其他框架的用户也在大规模使用.我第一次看到Webpack配置文件的时候,感觉实在太陌生,太混乱了.在玩了一段时间后,我现在觉得是Webpack独特的语法和新的理念导致了初学阶段的复杂度.顺便说一下,也正是因为这些理念,才让Webpack如此受欢迎. 正因为Webpack入门容易让人困惑,所以我写了这篇文章,希望能够帮助其他人更轻松的入门…

vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck,某种是glup,grunt,或者是fis等构建工具 然后安装一个包管理器,npm,bower,或者说是新一代:yarn 再然后用 包管理器 安装各种各样的包,如:vue,bootstrap,vuex等. 其后用es6的import或者是node的require引入包 最后通过 构建工具 打包或发布…

目录 关于此文 在学习webpack之前,我们先去了解它的作用 它与其他其他前端工具(gulp,grunt)有什么差别呢 安装 webpack.config.js 配置结果 webpack 开始简单配置 文件结构 demo地址 参考连接 关于此文 本文是笔者初学webpack后的一个简单总结和重新思考的过程.文章中加入了更多的认识和理解,关于配置就比较简陋了.希望能帮助到大家,有误的地方也请多多指正 (^^ゞ .最后,祝大家元旦快乐ヾ(≧▽≦*)o 在学习webpack之前,我们先去了解它的作用…

webpack 的基本用法   1.app.js 引入模块 import moduleLog from './module.js' //引入moduleLog从./module.js 2.module.js导出模块 export default function(){}; //导出 function(){} 3.打包 $ webpack app.js dist/bundle.js //打包 入口文件app.js 出口文件 ./dist/bundle.js 这里要使用 webpack 这个命令要…

在学习webpack的时候,配置文件中有一个publicPath属性,一直不是很明白它到底是怎么用,也查了很多资料,得到最多的说法是当打包的时候,webpack会在静态文件路径前面添加publicPath的值,当我们把资源放到CDN上的时候,把publicPath的值设为CDN的值就可以了.但是在使用webpack 进行开发的时候,得到的结果却和该说法不是很一致,经过一段时间的摸索,好像是懂了一点点,至少在简单的配置中不会报错,在这里记一下,做一个总结. 我们在使用webpack 进行开发的时候…

初学vue自己新建一个vue项目来做学习demo.不过在编写代码时一直出现空格不规范的警告.严重影响初学者的热情.错误如下图所示.(这样的错误很多,但大概翻译成中文的意思都是说空格使用不规范.) 这是因为你使用 ESLint,用来规范代码风格的.你的 Webpack 配置中大概是使用了 eslint-loader.在多人协作或大项目中推荐使用,不想要就在 webpack.config.js 中去掉.eslint是语法检查工具,但限制太过于严格,大部分开发人员无法适应,所以产生这个需求. 解决办法…

碎碎念:     好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊这让我有些惶恐,原因之二是前段时间接触并了解性地学习了amd,cmd模块,angular和vue,一些模板引擎,less预编译语言,以及开发相关的各种构建工具...讲真前端真的好杂,心有余而力不足有时就挺迷茫,所以这些仅仅只是接触是接触跟着官网了解学习并没有深入原理性的探索学习.曾经我在一开始就尝试…

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registry.npm…

这篇随笔会陆续地更新下去,用于汇集一些关于Webpack的初学跳坑总结还有VueJS的基础知识. Webpack部分 ① 快速建立一个Webpack-Vue项目开发环境(4.39.1-2019/08/07) Step 1 安装 Webpack:     COPY EXPAND 1 npm install webpack -g     COPY EXPAND Step 2 Webpack 4 需要再安装 Webpack-Cli:     COPY EXPAND 1 npm install webp…

之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者服务器 一.安装webpack 你需要之前安装node.js $ npm install webpack -g 安装成功后,便可以使用webpack命令行了. ok,开始工作! 二.新建一个空目录,名字为myApp,文件如下 entry.js document.write("It works.&qu…

接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快速入手的.接地气的.傻瓜式的教程,自己手把手教又太浪费时间.想了一想,决定自己写一篇webpack的傻瓜式教程,旨在教会尚未了解webpack的人迅速入手. 对于webpack的概念.用途.好处等等一律省略,想了解的上网搜索即可,这里直接演示如何新建一个webpack的实例. 1.安装好nodejs…

背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档一样.一个html页面,夹杂着css,javascript是再常见不过的事了. 随着前端的不断发展,特别是单页应用的兴起,这种所见即所得的IDE工具,就渐渐地退出了前端的主流.一个应用,通常只有一个静态页面(index.html),甚至这个页面的body只有一个或少数几个div组成.这时有大量的cs…

Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化.   1.npm…

使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这篇文章进行安装和破解http://www.cnblogs.com/chengxs/p/6245281.html 2.然后需要你的电脑安装了node.js. 可以参考这篇文章http://www.cnblogs.com/chengxs/p/6221393.html 2.第一种方法:使用命令行窗口.可以在你要创建…

webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装webpack 2.如何使用webpack 3.如何使用loaders 4.如何使用开发服务器 话不多说,马上开启我们的webpack之旅...... 一.安装webpack(依赖nodeJs环境,nodejs环境的搭建不在此赘述) npm install webpack -g 二. Hello W…

1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进行打包更新 webpack -p #对打包后的文件进行压缩 webpack -d #提供SourceMaps,方便调试 webpack --colors #输出结果带彩色 webpack --profile #输出性能数据,可以看到每一步的耗时 webpack --display-modules #…

去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD,在学习过程中还可以,但是应用到实际项目时就会遇到各种坑,到头来各种妥协,我看到很多同学遇到这种情况,最后怪DDD,说DDD不实用云云.另有一些都没细了解过就抨击反对的,事实上,要想否定个东西,你总要了解了才有发言权. 一.误区 综合起来主要有一下几种误区: 1.1.DDD更高级,可以替代三层,为了…

open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugin() 压缩生成的 JS extract-text-webpack-plugin 离CSS和JS文件 webpack.optimize.OccurenceOrderPlugin 为组件分配ID,通过这个插件webpack 可以分析和优先考虑使用最多的模块,并为它们分配最小的ID 热替换命令行:web…

原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-loader node-sass --save-dev <…

原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 &…

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程…

1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命令打包开发chunk,并支持热替换 可以通过命令打包可发布的chunk 支持路由 路由中的代码实现按需加载 用CommonJs的风格组织代码 代码结构尽量清晰易懂 尽我所能先做出一个满足以上特点的架子吧,最近看完ES6,准备再去看看flux和reduce,看过之后再来思考下前端数据如何管理比较科学规…

因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最近用vue2 + webpack重新构建了下,代码量挺简洁的,逻辑也很简单,适合新手看看,顺便求几个star 项目名称: FrameSpriteMaker 简称 FSM github项目地址:https://github.com/pspgbhu/FrameSpriteMaker-vue…

原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不同,gulp的流式构建使得gulpfile.js文件写起来并不是像Gruntfile.js一样完成一个个插件的配置那样多.对于这点我的理解还不是很深刻,只能暂时这样做一个比较吧,以后的学习接触多了应该就会深刻的体会到. 2.似乎gulp的上手比grunt更简单一些,或者说一个是轻量级一个是重量级的吧…

原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —dist   //压缩后的目标文件夹 —lib   //各个模块 —drag    //拖拽模块 —scale   //缩放模块 —seajs    //seajs库 —seajs_drag    //入口的主文件main.js —main.js /*——————————————————————————…