vue 入门之安装Webpack

国内优秀镜像

有很多方法来配置npm的registry地址，
下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：

临时使用

npm --registry https://registry.npm.taobao.org 

持久使用

npm config set registry https://registry.npm.taobao.org# 配置后可通过下面方式来验证是否成功npm config get registry

安装Webpack

安装 Webpack
在安装 Webpack 前，你本地环境需要支持 node.js。
由于 npm 安装速度慢，所以使用淘宝的镜像

使用 npm 安装 webpack：

npm install webpack -g --registry=https://registry.npm.taobao.org

使用 npm 安装 webpack-dev-server:

npm install webpack-dev-server -g --registry=https://registry.npm.taobao.org

使用 Webpack

启动本地服务器

执行

webpack-dev-server

命令后，就可http://localhost:8080/访问了。

watchmode 监察模式:

在监察模式当中，Webpack 会监察你的所有文件，任一文件有所变动，它就会立马重新构建，重新创建你的输出文件。

webpack --watch

webpack 加载器 和 预加载器

首先 使用 命令

npm init 

创建一个 package.json文件。

然后 执行

npm install babel-core babel-loader jshint jshint-loader node-libs-browser babel-preset-env babel-preset-react webpack --save-dev --registry=https://registry.npm.taobao.org  

创建一个开始脚本

这个实际上是npm的一个特性， 但确实是些你值得做的事儿

在package.json, 有一个scripts 的关键字。用一下内容代替你原先script中的内容

"scripts": { "start": "webpack-dev-server" }

现在我们就能用

npm start

来快速的开启 web server啦

让webpack 压缩你的code

给webpack加个 -p 旗帜然后就会产生一个压缩包

webpack -p

撰写不同的配置文件来应对成品与开发

安装 strip-loader:

npm install strip-loader --save-dev --registry=https://registry.npm.taobao.org   

开发：

 webpack --config webpack-dev.config.js -p

生产：

 webpack --config webpack-production.config.js -p

更多资料

Webpack 入门教程
Webpack新手入门
webpack 2 实践系列（一） — 安装与入门
webpack实践笔记（二）—添加 loaders
https://github.com/webpack/webpack/issues/3043
Vue.js学习—脚手架方式搭建vue项目