开发工具心得：如何 10 倍提高你的 Webpack 构建效率

0. 前言图1：ES6 + Webpack + React + Babelwebpack 是个好东西，和 NPM 搭配起来使用管理模块实在非常方便。而 Babel 更是神一般的存在，让我们在这个浏览器尚未全面普及 ES6 语法的时代可以先一步体验到新的语法带来的便利和效率上的提升。在 React 项目架构中这两个东西基本成为了标配，但 commonjs 的模块必须在使用前

业界 2016年06月21日

webpack进阶之loader篇

webpack的loaders是一大特色，也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder一、loaders之 预处理css-loader 处理css中路径引用等问题style-loader 动态把样式写入csssass-loader scss编译器less-loader less编译器postcss-loader scss再处理npm install --s

业界 2016年07月13日

React技术栈——HotModuleReplacement

Hot Module Replacement是webpack下实现热刷新的模块，由于webpack的坑爹文档，看了很久才搞明白这东西怎么用。Webpacks adds a small HMR runtime to the bundle, during the build process, that runs inside your app. When the build c

业界 2016年07月14日

[译] Webpack——令人困惑的地方

原文 Webpack—The Confusing Parts[br]issue讨论Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为Webpack只是使用了比较特别的

业界 2016年05月09日

Webpack 指南（整理 草稿）

基础安装首先要安装 Node.js， Node.js 自带了软件包管理器 npm。用 npm 全局安装 Webpack：$ npm install webpack -g通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。# 进入项目目录，初始化，创建 package.json。# 若存在 package.json 文件，则不运行

业界 2016年07月06日

gulp和webpack初探

首先声明一下，gulp和webpack两者关系不大，主要是团队之前一直用grunt构建工具，这几天业务上比较清闲，老大让我学学新的gulp和webpack这些“潮流”工具，于是草草研究了一天，记一些笔记。gulp 真正“流程”化工具我记得实习刚刚进公司看到grunt，还是有点蒙，之前一直是本地开发，游览器F5，没想到前端也需要“编译工具”。所以grunt一直给我的感觉是“编

业界 2016年07月03日

利用webpack和vue实现组件化

上一篇webpack+vue起步我们实现了用webpack打包vue的最基本用法，这篇我们将利用webpack+vue实现组件化在vue中实现组件化用到了vue特有的文件格式.vue，在每一个.vue文件就是一个组件，在组件中我们将html，css，js全部写入，然后在webpack中配置vue-loader就可以了。建立vue组件在src目录下建立components文件

业界 2016年07月05日

webpack 单页面应用实战

这篇文章将介绍如何利用 webpack 进行单页面应用的开发，算是我在实际开发中的一些心得和体会,在这里给大家做一个分享。webpack 的介绍这里就不多说了，可以直接去官网查看。 关于这个单页面应用大家可以直接去我的github上查看https://github.com/huangshuwei/webpackForSPA，我将结合这个项目去介绍。如果大家觉得这篇文章有不妥

业界 2016年07月14日

Nodejs 代码中为 Gulp Webpack 等 Iterm2 窗口添加端口识别标记

缘由最近两年来经常在 Iterm2 中打开好几个窗口运行 Gulp, Webpack 等，在每个窗口布满 log 后，想找到哪个窗口是干嘛的都有些困难，更不用说这个窗口占用了哪个端口。所以得有方法标记每个窗口是哪个占用哪个端口号，在跑啥。解决方案一个 npm 包npm i set-iterm2-badge两行代码var setIterm2Badge = require('s

业界 2016年06月22日

webpack配合vue.js实现完整的单页面demo

本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，因为需要用到node的npm，所以确保安装了node，建议官网安装最新的稳定版本。并且在项目中需要加载一些npm包，由于npm的服务器在国外，可能我们下载的过程会比较慢，所以建议用阿里的镜像cnpm安装，10分钟实时更新一次npm的镜像。具体的下载配置参考阿里的cnpm官网。本文章只是和大家探讨怎么利用

业界 2016年06月21日