2016-01-01 Lim Geng
前言 在此之前看了一下gulp相关教程,这里有一个还不错:Gulp for Beginners, 推荐给大家看看。 通过本教程你会了解到: 如何安装webpack; 如何使用webpack; 如何使用loaders; 如何使用开发服务器; 安装webpack 你需要已经安装安装node.js. bash $ npm install webpack -g 这使得webpack命令可以使用 设置编译器(Compilation) 以一个空文件夹作为开始. 创建这些文件: add entry.js js document.write("It works"); add index.html html 继续阅读 »
2016-08-28 Wenjie Yao
  webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。它摒弃了webpack(尤其是使用dev server时)在命令行内诸多杂乱的信息结构,为webpack在命令行上构建了一个一目了然的仪表盘(dashboard),其中包括构建过程和状态、日志以及涉及的模块列表。有了它,你就可以更加优雅的使用webpack来构建你的代码。   另外,它自开源以来短短半个月,就已经在github上收获了6000多枚star,足见人们对于提升开发工具的用户体验有着巨大的需求。 继续阅读 »
2017-09-09 jude
更新 项目基于 webpack 2.X 版本,对应的源码在 master 分支;如果想使用 webpack 4.X ,请切换到 webpack4 分支。 webpack 4.X 大致思路不变,但配置 webpack 时的写法有变,同时可能要升级一些依赖。当控制台提示某个包缺少相应版本的 webpack 时,直接 npm install 包名 升级那个包就行。 继续阅读 »
2017-02-17 Lim Geng
昨天有朋友说让vsc支持react和es6太难配置了,我说直接用webpack吧,vsc仅仅用来敲代码就行了。之所以我这么说,因为我的vsc只是用来敲代码的,常用的git操作,依赖安装都是寄几在终端搞的。于是今天试了一下webpack,也踩了几脚坑,先让我擦干眼泪。 这里是这篇文章涉及到的源代码,如果需要运行可以直接跳到下面的最后一步生成。 如何配置 当你看到最终的是如何实现的时候,我其实是拒绝的,我宁可花长时间写的复杂点,但是很简单,绞尽脑汁也多写不了几行字。 创建目录 cd ~/Desktop mkdir hello-react cd hello-react 初始化npm npm init -y // 你也可以不 继续阅读 »
2017-10-27 Catsugar
这是一个不靠谱的学习笔记。想到啥写啥 grunt 自动化工具 安装 grunt ``` bash install grunt npm install -g grunt-cli ``` ``` bash 安装工具 npm install load-grunt-tasks --save-dev npm install time-grunt --save-dev 继续阅读 »
2015-11-21 jude
我公司用的开发框架是 ruby on rails ,话说这套框架真的很不错,只要遵守约定,很多必要但是琐碎的事情对你来说都是透明的。比如说静态资源的压缩、打包、打指纹这三大必要步骤,rails 对开发者就很友好:在 development 环境下,更改前端任何一个静态文件,保存之后,文件都会被重新打指纹;开发完成之后,部署到 production 时,自动帮你压缩、打包、打指纹,再也不用管这些破事儿了。 继续阅读 »
2015-08-15 Alex Sun
注:本文内容比较基础,供初学者快速入门参考。 更多详细信息请参考官方文档。 1. 安装 npm install -g webpack 继续阅读 »
2017-01-25 AnnatarHe
近期在公司把 PC-WWW 项目从之前比较复杂的脚本改成了webpack,随后因为看到webpack2发布了正式版本又升级到了 webpack2。效果非常好。 为什么使用 webpack webpack 是一款非常非常强大的前端资源处理工具,可以把所有前端需要的资源统一处理。比如js文件,css文件,甚至图片,字体文件,html文件。通过一个个独特的 loader 来对文件进行一些处理。 继续阅读 »
2016-04-29 令狐葱
Update [20160725] Facebook 官方提供了一个可以生成React Starter项目的工具,有兴趣可以看下:create-react-app 前言 React技术之火爆无须多言,其与webpack的完美结合,也让二者毋庸置疑的成为天生一对。为了进行React的快速和规范化开发,开源社区中涌现了很多React+webpack的boilerplate项目。通过使用这些boilerplate,我们可以快速的创建一个React项目的架构。 葱哥之前专门创建了一个Github项目用于收集这些boilerplate:awesome-react-boilerplate。当然这里不可能完整收录,但是目前为止已经有近30个 继续阅读 »
2016-07-26 令狐葱
前言 在上一篇文章中,葱哥从零开始创建了一个react的boilerplate,并使用webpack进行build,使其支持ES6,同时使用karma+mocha等进行单元测试。虽然单元测试有了,但是代码中哪些写了测试,哪些没写呢?本文就将在上一篇文章的基础上为其增加生成代码覆盖率的功能。 代码 本文的最终代码可以在react_boilerplate_v8中查看。 准备工作 react boilerplate代码 首先拿到上一篇文章的代码: ``` git clone https://github.com/jiji262/react_boilerplate.git cd tutorial/react_boilerp 继续阅读 »