webpack入門

webpack

webpack是德國開發者Tobias Koppers開發的模塊加載器。

安裝

npm install webpack -g

webpack工做流程

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

webpack會把加載入口文件main.js，分析這個文件依賴的模塊而後統一打包到bundle.js。

webpack loader

Loader能夠理解爲是模塊和資源的轉換器，它自己是一個函數，接受源文件做爲參數，返回轉換的結果。

Loader的特性：

• 能夠經過管道方式鏈式調用，每一個loader能夠把資源轉換成任意格式並傳遞給下一個loader，可是最後一個loader必須返回javascript。
  
• 能夠同步或一部執行
  
• 運行在node.js環境中，能夠完成任何node.js程序能夠勝任的任務
• 能夠接受參數
• 能夠經過文件擴展名或正則表達式綁定不一樣類型的文件
• 能夠經過npm來發布跟安裝
• 能夠訪問配置
• 插件可讓loader擁有更多特性
• 能夠分發出附加的任意文件

能夠說loader是webpack的核心

經常使用loader

• css-loader 讀取css文件
• style-loader 把css插入頁面中
• url-loader 將圖片轉成base64

webpack配置

var webpack = require('webpack');
module.exports = {
  entry: ['./entry.js'],   //數組，容許有多個入口
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
        test: /\.css$/,
        loader: 'style!css'
      }]
  }
};

webpack輔助

當項目逐漸變大，webpack的編譯時間會變長，能夠經過參數讓編譯輸出的內容帶有進度和顏色

webpack --progress --color

//other commands
webpack #最基本的啓動webpack命令
webpack -w #提供watch方法，實時進行打包更新
webpack -p #對打包後的文件進行壓縮
webpack -d #提供SourceMaps，方便調試
webpack --colors #輸出結果帶彩色，好比：會用紅色顯示耗時較長的步驟
webpack --profile #輸出性能數據，能夠看到每一步的耗時
webpack --display-modules #默認狀況下 node_modules 下的模塊會被隱藏，加上這個參數能夠顯示這些被隱藏的模塊

開啓監聽模式

webpack --watch

開啓監聽模式後，沒有改變的模塊會在編譯後緩存到內存中，而不會每次都被從新編譯，能夠不用每次等待漫長的build

webpack+vue

webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/main',

  output: {
    path: path.join(__dirname, './dist'),   //文件地址，使用絕對路徑
    filename: '[name].js',
    publicPath: '/dist/'   //公共文件生成的地址
  },

  devServer: {
    historyApiFallback: true,
    hot: false,
    inline: true,
    grogress: true
  },

  //加載器
  module: {
    //loader 的執行順序是從右至左滴
    loaders: [
      { test: /\.vue$/, loader: 'vue' },  //解析.vue文件
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, //ES6
      { test: /\.css$/, loader: 'style!css!autoprefixer' },  //編譯css並自動添加css前綴
      { test: /\.scss$/, loader: 'style!css!sass?sourceMap' }, //編譯sass
      { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192' },
      { test: /\.(html|tpl)$/, loader: 'html-loader'}
    ]
  },

  //vue-loader配置
  vue: {
    loaders: {
      css: 'style!css!autoprefixer'
    }
  },

  // babel-loader配置， 轉換成ES6語法（ES2015）
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },

  resolve: {
    // require時省略擴展名，如 require('some') 便可，不需寫 some.js
    extensions: ['', '.js', '.vue'],

    // 別名，能夠理解成定義一個常量 fitler = 'dirname/src/filters'
    alias: {
        filter: path.join(__dirname, './src/filters'),
        components: path.join(__dirname, './src/components')
    },

    //開啓source-map，webpack有多種source-map，在官網文檔能夠查看
    devtool: 'eval-source-map'

  }
};

入口文件

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

import index from './components/app.vue';
import list from './components/list.vue';
import hello from './components/hello.vue';

//開啓debug模式
Vue.config.debug = true;

// new Vue(app);//這是上一篇用到的，新建一個vue實例，如今使用vue-router就不須要了。
// 路由器須要一個根組件。
var App = Vue.extend({});

// 建立一個路由器實例
var router = new VueRouter();


// 每條路由規則應該映射到一個組件。這裏的「組件」能夠是一個使用 Vue.extend建立的組件構造函數，也能夠是一個組件選項對象。
// 稍後咱們會講解嵌套路由
router.map({//定義路由映射
    '/index':{//訪問地址
        name:'index',//定義路由的名字。方便使用。
        component:index,//引用的組件名稱，對應上面使用`import`導入的組件
        //component:require("components/app.vue")//還能夠直接使用這樣的方式也是沒問題的。不過會沒有import集中引入那麼直觀
    },
    '/list': {
        name:'list',
        component: list
    },
});

router.redirect({//定義全局的重定向規則。全局的重定向會在匹配當前路徑以前執行。
    '*':"/index"//重定向任意未匹配路徑到/index
});

// 如今咱們能夠啓動應用了！
// 路由器會建立一個 App 實例，而且掛載到選擇符 #app 匹配的元素上。
router.start(App, '#app');

[參考連接]