webpack配置詳解

1. 首先，來講說我對webpack的理解

一. 號稱 require Anything 。打包各類各樣的文件

// 好比你有一個index.js文件。你就能夠在這個文件裏面require其餘的文件
var _mytools = require('util/mytools.js');
require('./index.less');

二. 模塊化開發，結構層次清晰

// 好比你能夠在body標籤裏面引入其餘的html文件
<%= require('html-loader!./layout/nav.html') %>

三. 牛逼的插件和各類各樣的loader

如 webpack-dev-server, 能夠實時監控效果
   babel-loader      , 能夠轉換es6語法到es5......

上面的介紹，很垃圾，徹底不足以描述webpack的功能。

2. webpack.config.js

一. 配置別名

// 配置別名 之後就能夠直接引用該位置 以下面的page 之後就能夠直接require('page/..')
resolve: {
    alias: {
      node_modules:__dirname + '/node_modules',
      page:__dirname + '/src/page',
    }
  }

二. 咱們須要指定打包文件的入口 entry.

// 我習慣把全部的入口文件 都放在src/page頁面
entry: {
    'common'            : ['./src/page/common/index.js'],
    'index'             : ['./src/page/index/index.js'],
    'list'              : ['./src/page/list/index.js']
},

三. 指定生成的文件的存放位置 output.

output: {
    // 路徑
    path: __dirname + '/dist/',
    // 訪問路徑
    publicPath:'/dist/'
    // 文件名
    filename: 'js/[name].js'
  },

四. 利用loader處理各類各樣的文件

module: {
    loaders: [
      // 1. js文件處理 利用webpack自帶的js處理功能. babel處理出來的對ie支持很差
      
      
      // 2. css,less,stylus... 加載順序:從下到上,從又到左
      //    css-loader         處理css裏面的 url
      //    style-loader       將css插入到頁面的style標籤
      //    ExtractTextPlugin  單獨打包css樣式,以避免打包在js裏面致使樣式錯亂
      //    個人webpack版本是1.* 注意下less和less-loader的版本, 我用的都是2.*的
      {
        test : /\.(less|css)$/,
        loader: ExtractTextPlugin.extract('style', 'css!less')
      },
      
      
      // 3. 圖片的處理
      // 小於8K的圖片將直接以base64的形式內聯在代碼中，能夠減小一次http請求。
      // 大於8k的呢?則直接file-loader打包, 這裏並無寫明file-loader.可是確實是須要安裝,不然會有問題.而name也是file-loader的屬性
      { 
        test: /\.(woff|woff2|eot|ttf|svg|jpg|png|gif)\??.*$/, 
        loader: 'url-loader',
        query: {
          limit: 8192,
          name: 'resourse/[name].[ext]'
        }
      },
      
      
      // 4. 這個我本身配置的 用於hogan.js的template
      {
        test: /\.string$/, 
        loader: 'html-loader',
        query : {
          // 須要壓縮
          minimize : true,
          // 壓縮的時候 不要刪除引號
          removeAttributeQuotes : false
        }
      }
    ]
  }

5. 插件的應用

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

//  默認會把全部入口節點的公共代碼提取出來,生成一個common.js,可是我指定他生成base.js
new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  filename: 'js/base.js'
}),

// 把css單獨打包到文件裏 
new ExtractTextPlugin("css/[name].css"),

// 自動生成html文件 而且引入相對的js文件
new HtmlWebpackPlugin ({
    // 模板文件路徑
    template  : './src/view/'+name+'.html',
    // 輸出文件名以及路徑 dist/view/
    filename  : 'view/'+name+'.html',
    // 生成title標籤 也能夠<title><%= htmlWebpackPlugin.options.title%></title>
    title     : title,
    // 有true body script標籤位於html文件的 body 底部
    // head 放在head裏面
    // false 不生產js文件
    inject    : true,
    // 給生成的 js 文件一個獨特的 hash 值
    hash      : true,
    // 能夠看到咱們的入口有不少js文件 chunks會默認引用全部的 可是明顯咱們不須要
    // 咱們只須要引入本身單獨須要的js文件name.js 和 通用的 common.js
    chunks    : ['common',name],
    // 給生成的 html 文件生成一個 favicon圖標  通常放在更目錄下
    favicon   : './favicon.ico'
})

// 實際上一個個去寫 太麻煩了 用函數的方式來
var getHtmlConfig = function(name,title) {
  return {
      template  : './src/view/'+name+'.html',
      filename  : 'view/'+name+'.html',
      title     : title,
      inject    : true,
      hash      : true,
      chunks    : ['common',name],
      favicon   : './favicon.ico'
    }
}
new HtmlWebpackPlugin(getHtmlConfig('index', '首頁')),

6. 生產環境 和 線上環境 , 以及 webpack-dev-server

// 環境變量設置
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

// 若是是在生產環境 就在通用組件common裏面加入webpack-dev-server/client?http://localhost:80/
if('dev' === WEBPACK_ENV){
  config.entry.common.push('webpack-dev-server/client?http://localhost:80/');
}

// 而後,在package.json的scripts加上
{
    "dev_mac" : "WEBPACK_ENV=dev webpack-dev-server --inline --port 80",
    "dev_win" : "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 80",
    "dist_mac": "WEBPACK_ENV=online webpack-dev-server -p",
    "dist_win": "set WEBPACK_ENV=online && webpack -p"
}

// 還能夠繼續更改output的配置
publicPath: 'dev' === WEBPACK_ENV ? '/dist/' : '//..線上地址../dist/'

7. 庫 和 各類插件的引用

// jquery的引入
// 咱們能夠設置一個footer.html 用來描述頁面的底部
// 而後在footer.html的最下面引入jquery
<script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>

// 在webpack裏面配置 這樣能夠require 可是又不會被編譯
externals: {
    'jquery':'window.jQuery'
},

---

// 插件的引用
// 如上圖 插件unslider 必備的js代碼 和 美化css 都經過index.js引入.
// 引用的時候, 就能夠var slider = require("util/slider/index.js")
$('.banner').unslider({
    speed: 500,               //  速度
    delay: 3000,              //  延時
    complete: function() {},  //  結束回調
    keys: true,               //  左右箭頭
    dots: true,               //  下面的小圓點
    fluid: false              //  支持響應設計。可能會破壞沒有響應的設計
});