概述

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

上一篇已經(jīng)介紹如何安裝了，這里就不再重復了。

運行webpack

webpack需要編寫一個config文件，然后根據(jù)這個文件來執(zhí)行需要的打包功能。我們現(xiàn)在來編寫一個最簡單的config。新建一個文件，命名為webpack-config.js。config文件實際上就是一個Commonjs的模塊。內(nèi)容如下：

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;

　　我的目錄結(jié)構(gòu)是這樣的：

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

　　main.js文件內(nèi)容如下：

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

　　a.js文件內(nèi)容如下：

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

　　然后我們執(zhí)行如下的命令：

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

　　這樣我們就能在目錄里面看到一個新生成的目錄build，目錄結(jié)構(gòu)如下：

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

　　然后引用app.js就Ok啦。main.js和模塊a.js的內(nèi)容就都打包到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');
//其他節(jié)點省略    
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

打包靜態(tài)資源

安裝css-loader和style-loader

npm install css-loader --save -dev
npm 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按字符串導出，這兩個基本都是組合使用的。打包完成的文件，引用執(zhí)行后，會發(fā)現(xiàn)css的內(nèi)容都插入到了head里的一個style標簽里。如果是sass或less配置方式與上面類似。

可以通過url-loader把較小的圖片轉(zhuǎn)換成base64的字符串內(nèi)嵌在生成的文件里。安裝：

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”來實現(xiàn)。這個插件不需要安裝，因為webpack已經(jīng)把他包含進去了。接著我們來看配置文件：

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",//和上面配置的入口對應(yīng)
            filename: "vendor.js"http://導出的文件的名稱
        })
    ]
}

　　執(zhí)行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"http://注意這里使用了name變量
    }    
}

　　

webpack-dev-server

在開發(fā)的過程中個，我們肯定不希望，每次修改完都手動執(zhí)行webpack命令來調(diào)試程序。所以我們可以用webpack-dev-server這個模塊來取代煩人的執(zhí)行命令。它會監(jiān)聽文件，在文件修改后，自動編譯、刷新瀏覽器的頁面。另外，編譯的結(jié)果是保存在內(nèi)存中的，而不是實體的文件，所以是看不到的，因為這樣會編譯的更快。它就想到與一個輕量的express服務(wù)器。安裝：

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: '',  //靜態(tài)資源的目錄 相對路徑,相對于當前路徑 默認為當前config所在的目錄
        devtool: 'eval',
        hot: true,        //自動刷新
        inline: true,    
        port: 3005        
    },
    devtool: 'eval',
    output:{
        path:buildPath,
        filename:"app.js"
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),//這個好像也是必須的，雖然我還沒搞懂它的作用
        new webpack.NoErrorsPlugin()
    ]
}

　　

執(zhí)行命令：

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

　　

默認訪問地址：http://localhost:3000/index.html(根據(jù)配置會不一樣)

有一點需要聲明，在index.html（引用導出結(jié)果的html文件）里直接引用“app.js”，不要加父級目錄,因為此時app.js在內(nèi)存里與output配置的目錄無關(guān)：

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

　　

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

總結(jié)

以上是生活随笔為你收集整理的WebPack常用功能介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。