使用 webpack-visualizer 进行打包模块分析

我们现在已经非常习惯使用 Webpack 进行 JS 模块的打包处理。当然有的时候我们在优化代码的时候需要对所引用的模块进行体积分析,从而进行代码优化。当然这些工具有很多了,今天主要说下 webpack-visualizer。 webpack-visualizer 是一款 webpack模块分析插件,使用非常简单,你只需要: npm install webpack-visualizer-plugin --save-dev 然后编辑你的 webpack 配置文件: var Visualizer = require('webpack-visualizer-plugin') 详情 »

使用wbepack CLI 迁移到webpack2

Webpack2 已经出来许久,但是由于配置写法的变化,很多人还没有迁移。关于 webpack2 的一些变化可以阅读这篇文章 What's new in webpack 2。 如果你计划从 webpack2 迁移到 webpack2 的话,关于配置如何进行更改可以从 这里 知道。但是今天主要是推荐另外一个命令行工具 webpack CLI。 它可以快速的生成webapack 配置和 进行配置迁移。 详情 »

webpack dev server 2.0 一些变化

webpack dev server 2.0 配合着下新版本的webpack2面世,最近项目的配置也在迁移到webpack2上来的。推荐阅读 Migrating from v1 to v2 webpack dev server在这次升级中发生了很多变化,下面罗列一些和你开发相关围绕紧密一些更新点: 只能配合weexpack2使用,所以升级请把相关依赖全部升级上去. inline 命令现在默认放到了命令行支持中,如果需要取消加上--no-inline 取消掉一些不必要的console输出,比如当服务器关掉后,还一直出现error信息。 clientLogLevel 详情 »

webpack 运行多个配置文件

一般大多情况可能我们都只会遇到一次性打包的情况。偶尔我们可能需要正对同样的内容打包两份不同的文件。这个时候也非常好办,就是把配置放到一个数组里即可。 var path = require("path"); var webpack = require("../../"); module.exports = [ { name: "mobile", entry: "./example", output: { path: path.join(__dirname, "js"), filename: "mobile.js" 详情 »

使用React-router和Webpack快速构建一个react程序

初始化项目 我们先创建个空文件夹,然后初始化 package.json ,填写一些基本信息。 $ npm init 接下来我们开始安装依赖项,我的 package.json 的依赖项如下 "devDependencies": { "babel": "^5.5.6", "babel-core": "^5.5.6", "babel-loader": "^5.1.4" 详情 »