阮一峰在微博里说:

前端变化有多快?两年前,大家都用Grunt构建,去年用Gulp + Browserify构建,今年用Webpack构建,明年可能会使用纯ES6的构建工具。每变一次,前面的那些工具就全没用,都白学。要知道,这些工具每一个都是软件系统,单单Grunt就有4千个插件,然而全没用了。

nodejs相关

国内使用npm有时候不太顺利,可以考虑使用淘宝的镜像。

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

vuejs

webpack

目前前端领域工具异常丰富,webpack是黏合它们的胶水,可以作为入口,如果手动拼接,极其琐碎

demo

教程

vuejs与webpack相关案例

vue-hackernews

HackerNews clone with Vue.js

vuejs官方的案例

  • 构建大型应用 组件化:组件(Component)是 Vue.js 最强大的功能之一
  • sudo npm install –registry=http://registry.npm.taobao.org
  • 网站的信息来自: wss://s-usc1c-nss-136.firebaseio.com/.ws?v=5&ns=hacker-news
    • 用到了firebase
    • 调试wss
      • python3, pip install websocket
      • wsdump.py

qingcheng

qingcheng是python-china的前端

qingcheng的后端为zerqu,基于flask写的,专注于提供api

not a forum, it is an API based application

开发

mac下,nodejs升级为v5.0,nodejs太旧会有问题

开始:

  • sudo npm install
  • make dev

注意: webpack-dev-server

生产环境

  • make build
  • python -m SimpleHTTPServer 8000

vue-demos

  • sudo npm install sass-loader node-sass webpack –save-dev –registry=http://registry.npm.taobao.org
  • sudo npm install
  • npm run dev
    • 会解释为:webpack-dev-server –inline –hot –config webpack.dev.conf.js
  • npm run build

demo-Vue-sign

用vue组件化做个简单的注册登陆SPA页面示例

webpack-dev-server

webpack 提供了 webpack-dev-server 解决实时刷新页面的问题,同时解决实时构建的问题

  • js 文件修改
  • webpack-dev-server 监控到变化
  • webpack 在内存中重新构建 bundle.js
  • webpack-dev-server 保证页面引用的 bundle.js 文件与内存中一致

参考