webpack入門學習

標籤：

一、認識webpack

    webpack是一款模組打包載入工具。它能夠將各種資源、JS、CSS、圖片等作為模組打包載入。本人也是近期因工作需要才開始接觸webpack，在下文中有誤的地方還希望各位能夠指出，本人也會積極改正。

二、安裝webpack

    這裡安裝webpack的前提是已經安裝的node.js和npm。下面進行webpack的全域安裝：

    $ npm webpack install -g

三、相關配置

    每個使用webpack的項目必須有一個webpack.config.js檔案。先上代碼。下面是我在本次項目中編寫的webpack.config.js檔案：

 1 var path = require(‘path‘) 2 var webpack = require(‘webpack‘) 3 var fs = require(‘fs‘); 4 var dir = ‘./client/develop/view‘; 5 var readDir = fs.readdirSync(dir); 6 var entry = { 7   vendor: [‘babel-polyfill‘,‘react‘,‘redux‘] 8 }; 9 readDir.forEach(v => {10   v = v.replace(/\.js$/, ‘‘);11   entry[v] = dir + ‘/‘ + v;12 });13 14 module.exports = {15   entry: entry,16   output: {17     path: path.join(__dirname, ‘client‘, ‘dist‘, ‘js‘),18     filename: ‘[name].bundle.js‘,19     publicPath: ‘/js/‘20   },21   plugins: [22     new webpack.optimize.CommonsChunkPlugin(‘vendor‘, ‘vendor.bundle.js‘),23     new webpack.DefinePlugin({24       "process.env": {25         NODE_ENV: JSON.stringify("production")26       }27     })28   ],29   module: {30     loaders: [31       {32         test: /\.js$/,33         // loaders: [‘babel?optional=runtime‘],34         loaders: [‘babel?presets[]=es2015&presets[]=react‘],35         exclude: /node_modules/,36         include: __dirname37       }, {38         test: /\.css$/,39         loader: "style-loader!css-loader"40       },41       {42         test:/\.json$/,43         loader:‘json‘44       },45       // Optionally extract less files46       // or any other compile-to-css language47       {48         test: /\.less$/,49         loader: "style-loader!css-loader!less-loader"50       }51     ]52   }53 }

    由上面代碼能夠看出，webpack.config.js是有固定結構的，該結構主要體現在module.exports對象中：

1.輸入介面

    entry是頁面入口檔案配置，可以是字串、對象、數組格式。下面分別對三種格式進行說明：

    （1）字串格式：當entry是字串時，該字串對應的模組會在webpack啟動時載入。

    （2）數組格式：該數組內所有模組都會在webpack啟動時載入，數組的最後一個元素會作為輸出。

    （3）對象格式：此時會構建一個或多個bundle輸出。在上面代碼中entry是一個對象，啟動webpack後，會在‘__dirname/client/dist/js‘路徑下組建檔案名為vendor和‘

./client/develop/view‘目錄下所有檔案的名稱的bundle檔案（太繞口了，原諒我高考語文差點不及格）。

2.輸出介面

    export是對應的輸出配置。該對象有下面三個屬性：

    （1）path：檔案輸出路徑。說明了檔案輸出的位置。上面代碼中檔案輸出路徑為‘__dirname/client/dist/js‘。

    （2）filename：檔案輸出名稱。代碼中檔案輸出名稱為‘[name].bundle.js‘，‘.bundle.js‘為檔案名稱尾碼，‘[name]‘為entry對象中讀取的檔案名稱。

    （3）publicPath：表示資源發布後的首碼地址。

3.外掛程式引入

    在本項目中使用兩個外掛程式

    （1）CommonsChunkPlugin外掛程式：它用於提取多個入口檔案的公用指令碼部分，然後產生一個 common.js 來方便多頁面之間進行複用。

    （2）DefinePlugin外掛程式：用於接收字串插入到代碼當中。

4.載入器配置

    載入器配置是最為關鍵的一塊。該部分針對不同的檔案類型分別調用不同的載入器來負載檔案。

    （1）JS檔案載入

 {        test: /\.js$/,        loaders: [‘babel?presets[]=es2015&presets[]=react&presets[]=react-hmre&presets[]=stage-2‘],        exclude: /node_modules/,        include: __dirname  }

    代碼中test為Regex，表示尾碼為.js的檔案使用loaders後面的載入器進行載入。

    （2）CSS檔案載入

{        test: /\.css$/,        loader: "style-loader!css-loader" }

    該部分表示載入尾碼為.css的檔案使用loader後面的載入器進行載入。

    （3）json檔案載入器

{        test: /\.json$/,        loader: ‘json‘  }

    該部分表示json檔案使用loader後面的載入器進行載入

    （4）less檔案載入器

{        test: /\.less$/,        loader: "style-loader!css-loader!less-loader" }

    該部分表示尾碼為.less的檔案使用loader後面的載入器進行載入

    上面一共列舉了四類檔案載入。在webpack中還有很多檔案載入器，在其他項目中如果需要載入其他類型檔案，只需調用該類型檔案載入器即可。

四、運行webpack

    webpack.config.js編寫完畢後，可以運行webpack來查看效果。運行步驟為：在webpack.config.js檔案所在目錄的DOS命令列直接輸入webpack。是我運行該項目webpack後的：

五、總結

    從上面可以看到，webpack的設定檔可以按照上面的結構進行編寫。然後根據項目需要，分別對輸入介面、輸出介面、外掛程式引入、載入器配置這幾個部分進行相應修改。其實，在項目中更多的是使用webpack+gulp的方式進行檔案打包管理，現在本人也正在學習gulp，後續也會寫一些gulp方面的東西。

    說明一下，本人也是接觸webpack沒多久，還有很多地方沒有學習到，也希望大神們多多賜教。

webpack入門學習