WebPack常用功能介紹

標籤：element   exp   多個   變數   複製   uglifyjs   ade   目錄結構   web   

概述

Webpack是一款使用者打包前端模組的工具。主要是用來打包在瀏覽器端使用的javascript的。同時也能轉換、捆綁、打包其他的靜態資源，包括css、image、font file、template等。個人認為它的優點就是易用，而且常用功能基本都有,另外可以通過自己開發loader和plugin來滿足自己的需求。這裡就盡量詳細的來介紹下一些準系統的使用。

上一篇已經介紹如何安裝了，這裡就不再重複了。

運行webpack

webpack需要編寫一個config檔案，然後根據這個檔案來執行需要的打包功能。我們現在來編寫一個最簡單的config。建立一個檔案，命名為webpack-config.js。config檔案實際上就是一個Commonjs的模組。內容如下：

var webpack = require(‘webpack‘);var path = require(‘path‘);var buildPath = path.resolve(__dirname,"build");var nodemodulesPath = path.resolve(__dirname,‘node_modules‘);var config = {    //入口檔案配置    entry:path.resolve(__dirname,‘src/main.js‘)，    resolve:{        extentions:["","js"]//當requrie的模組找不到時，添加這些尾碼    },    //檔案匯出的配置    output:{        path:buildPath,        filename:"app.js"    }}module.exports = config;

　　我的目錄結構是這樣的：

webpack    |---index.html    |---webpack-config.js    |---src         |---main.js         |---js              |---a.js

　　main.js檔案內容如下：

var a = require(‘./js/a‘);a();console.log(‘hello world‘);document.getElementById("container").innerHTML = "<p>hello world</p>";

　　a.js檔案內容如下：

module.exports = function(){    console.log(‘it is a ‘);}

　　然後我們執行如下的命令：

webpack --config webpack-config.js --colors

　　這樣我們就能在目錄裡面看到一個新產生的目錄build，目錄結構如下：

webpack    |---index.html    |---webpack-config.js    |---build         |---app.js

　　然後引用app.js就Ok啦。main.js和模組a.js的內容就都打包到app.js中了。這就示範了一個最簡單的把模組的js打包到一個檔案的過程了。

如何壓縮輸出的檔案

plugins: [    //壓縮打包的檔案    new webpack.optimize.UglifyJsPlugin({      compress: {        //supresses warnings, usually from module minification        warnings: false      }    })]

　　

如何copy目錄下的檔案到輸出目錄

copy檔案需要通過外掛程式"transfer-webpack-plugin"來完成。

安裝：

npm install transfer-webpack-plugin  -save

var TransferWebpackPlugin = require(‘transfer-webpack-plugin‘);//其他節點省略    plugins: [    //把指定檔案夾下的檔案複製到指定的目錄    new TransferWebpackPlugin([      {from: ‘www‘}    ], path.resolve(__dirname,"src"))  ]

　　

打包javascript模組

支援的js模組化方案包括：

• ES6 模組

  import MyModule from ‘./MyModule.js‘;

• CommonJS

  var MyModule = require(‘./MyModule.js‘);

• AMD

  define([‘./MyModule.js‘], function (MyModule) {});

ES6的模組需要配置babel-loader

打包靜態資源

安裝css-loader和style-loader

npm install css-loader --save -devnpm install style-loader --save -dev

　　

var config = {    entry:path.resolve(__dirname,‘src/main.js‘),    resolve:{        extentions:["","js"]    },    output:{        path:buildPath,        filename:"app.js"    },    module:{        loaders:[{            test:/\.css$/,            loader:‘style!css‘,            exclude:nodemodulesPath        }]    }}

　　style-loader會把css檔案嵌入到html的style標籤裡，css-loader會把css按字串匯出，這兩個基本都是組合使用的。打包完成的檔案，引用執行後，會發現css的內容都插入到了head裡的一個style標籤裡。如果是sass或less配置方式與上面類似。

 

可以通過url-loader把較小的圖片轉換成base64的字串內嵌在產生的檔案裡。安裝：

npm install url-loader --save -dev

　　config配置:

var config = {    entry:path.resolve(__dirname,‘src/main.js‘),    resolve:{        extentions:["","js"]    },    output:{        path:buildPath,        filename:"app.js"    },    module:{        loaders:[{            test:/\.css$/,            loader:‘style!css‘,//            exclude:nodemodulesPath        },        { test:/\.png$/,loader:‘url-loader?limit=10000‘}//限制大小小於10k的        ]    }}

　　

公用的模組分開打包

這需要通過外掛程式“CommonsChunkPlugin”來實現。這個外掛程式不需要安裝，因為webpack已經把他包含進去了。接著我們來看設定檔：

var config = {    entry:{app:path.resolve(__dirname,‘src/main.js‘),            vendor: ["./src/js/common"]},//【1】注意這裡    resolve:{        extentions:["","js"]    },    output:{        path:buildPath,        filename:"app.js"    },    module:{        loaders:[{            test:/\.css$/,            loader:‘style!css‘,            exclude:nodemodulesPath        }        ]    },    plugins:[        new webpack.optimize.UglifyJsPlugin({             compress: {                warnings: false             }        }),        //【2】注意這裡  這兩個地方市用來配置common.js模組單獨打包的        new webpack.optimize.CommonsChunkPlugin({            name: "vendor",//和上面配置的入口對應            filename: "vendor.js"//匯出的檔案的名稱        })    ]}

　　執行webpack會產生app.js和vendor.js兩個檔案.

多個入口

var config = {        entry:{        m1:path.resolve(__dirname,‘src/main.js‘),         m2:path.resolve(__dirname,‘src/main1.js‘),        vendor: ["./src/js/common"] //【1】注意這裡    },//注意在這裡添加檔案的入口    resolve:{        extentions:["","js"]    },    output:{        path:buildPath,        filename:"[name].js"//注意這裡使用了name變數    }    }

　　

 

webpack-dev-server

在開發的過程中個，我們肯定不希望，每次修改完都手動執行webpack命令來偵錯工具。所以我們可以用webpack-dev-server這個模組來取代煩人的執行命令。它會監聽檔案，在檔案修改後，自動編譯、重新整理瀏覽器的頁面。另外，編譯的結果是儲存在記憶體中的，而不是實體的檔案，所以是看不到的，因為這樣會編譯的更快。它就想到與一個輕量的express伺服器。安裝：

npm install webpack-dev-server --save -dev

　　config配置：

var config = {    entry:path.resolve(__dirname,‘src/main.js‘),    resolve:{        extentions:["","js"]    },    //Server Configuration options    devServer:{        contentBase: ‘‘,  //靜態資源的目錄 相對路徑,相對於當前路徑 預設為當前config所在的目錄        devtool: ‘eval‘,        hot: true,        //自動重新整理        inline: true,            port: 3005            },    devtool: ‘eval‘,    output:{        path:buildPath,        filename:"app.js"    },    plugins: [        new webpack.HotModuleReplacementPlugin(),//這個好像也是必須的，雖然我還沒搞懂它的作用        new webpack.NoErrorsPlugin()    ]}

　　

 執行命令：

webpack-dev-server --config webpack-dev-config.js  --inline --colors

　　

預設訪問地址： http://localhost :3000/index.html(根據配置會不一樣)

有一點需要聲明，在index.html（引用匯出結果的html檔案）裡直接引用“app.js”，不要加父級目錄,因為此時app.js在記憶體裡與output配置的目錄無關：

<script type="text/javascript" src="app.js"></script>

　　

具體參考：http://webpack.github.io/docs/webpack-dev-server.html 

WebPack常用功能介紹