sudo npm install webpack -g // -g 代表全局安裝webpack，調(diào)出命令行即可使用webpack命令
sudo npm install less -g   // -g 全局安裝 less to css 轉(zhuǎn)換器

mkdir new && cd new

npm init

name: (new) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: new
author: fz
license: (ISC) 


{
 "name": "gt",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
  "new"
 ],
 "author": "fz",
 "license": "ISC"
}

Is this ok? (yes) 

├── dist      // 編譯之后輸出文件的目錄
├── src       // 應(yīng)用邏輯代碼存放區(qū)域
│  ├── lib    // 存放npm上找不到的第三方庫(kù)
│  │  ├── backbone.js
│  │  └── underscore.js
│  ├── static   // 存放靜態(tài)資源
│  │  └── logo.png
│  ├── app.html  // 部件模板
│  ├── app.js   // 部件代碼
│  └── app.less  // 部件樣式
├── index.html   // 應(yīng)用首頁(yè)模板
├── index.js    // 應(yīng)用入口
├── package.json  // 工程配置文件
└── webpack.config.js // webpack配置文件

npm install --save less     // 本地按裝less
npm install --save less-loader  // less模塊的加載器，配合下面css-loader 和 style-loader
npm install --save css-loader  // css 模塊加載器
npm install --save style-loader // 以上兩個(gè)插件的根基
npm install --save url-loader  // 用來(lái)處理 圖片 字體 的模塊，是由下面file-loader封裝的。可自定義文件名
npm install --save file-loader 
npm install --save html-loader  // 加載html文件用的
npm install --save text-loader  // 加載純文本用的
npm install --save html-webpack-plugin      // 生成html文件插件
npm install --save extract-text-webpack-plugin  // 單獨(dú)提取css文件插件
npm install --save webpack            // 提供webpack對(duì)象
npm install --save webpack-dev-server      // webpack-server開(kāi)發(fā)包，方便調(diào)試
npm install --save vue
npm install --save jquery    

{
 "name": "new",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "dev": "webpack-dev-server --hot --inline",  // 用戶啟動(dòng) webpack-dev-server 用于用戶調(diào)試 --hot 代表熱替換 ， --inline 模式。。不太清楚。
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
  "new"
 ],
 "author": "fz",
 "license": "ISC",
 "dependencies": {
  "bootstrap": "^3.3.6",
  "css-loader": "^0.23.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.9.0",
  "html-loader": "^0.4.3",
  "html-webpack-plugin": "^2.22.0",
  "jquery": "^2.1.4",
  "less": "^2.7.1",
  "less-loader": "^2.2.3",
  "style-loader": "^0.13.1",
  "text-loader": "0.0.1",
  "url-loader": "^0.5.7",
  "vue": "^1.0.26",
  "webpack": "^1.13.1",
  "webpack-dev-server": "^1.14.1"
 }
}

var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    "index": "./index.js",
    "common": ['vue', 'jquery', 'underscore', 'backbone']
  },

  output: {
    path: './dist',    
    publicPath: '/path/',   
    filename: '[name].[hash].js'  
  },

  module: {
    loaders: [
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.less$/,
        loader: extractTextWebpackPlugin.extract("style-loader", "css-loader!less-loader")
        // 配合‘extract-text-webpack-plugin'可以剝離，css
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,
        loader: 'url-loader?limite=8192'  // limit 是轉(zhuǎn)換base64的文件大小的閥值8兆
      },
      {
        test: /\.html$/,
        loader: 'html-loader'  // 可以用來(lái)加載模板
      }
    ]
  },

  resolve: {
    root: [
      path.resolve(__dirname, 'src/lib')
    ],
    extensions: ['', '.js'],
    alias: {
      'underscore': 'underscore.js',
      'backbone': 'backbone.js',
    }
  },

 plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: '[name].[hash].js',
      chunks: ['index', 'common']  // extract commonChunk from index & common
    }),
    new htmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      chunks: ['index', 'common']
    }),
    new webpack.ProvidePlugin({
      jQuery: "jquery"
    }),
    new webpack.optimize.UglifyJsPlugin(),
    new extractTextWebpackPlugin("style.css", {
      allChunks: true
    })
  ]
};

// index.js

var Vue = require('vue');

var app = new Vue({
  el: '#app',
  components: {
    app: require('./src/app.js')
  }
});

// index.html 入口模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vueapp</title>
</head>
<body id="app">
  <app></app>
</body>
</html>

// app.js

var template = require('./app.html');
require('./app.less');

module.exports = {
  template: template,
  data: function (){
    return {
      message: 'hello word!!'
    };
  }
};

// app.html 視圖模板

<div id="div1">
  <img src="./static/logo.png" alt="">
  <div id="div2">
    {{message}}
  </div>
</div>

// app.less 視圖樣式

#div1 {
  text-align: center;
}

#div2 {
  font-size: 30px;
}

├── dist
│  ├── common.6b92c6b075a69a71d22f.js
│  ├── index.6b92c6b075a69a71d22f.js
│  ├── index.html
│  └── style.6b92c6b075a69a71d22f.css

'dev': 'webpack-dev-server --hot --inline'