webpack入門學習

1、認識webpack

    webpack是一款模塊打包加載工具。它可以將各類資源、JS、CSS、圖片等做爲模塊打包加載。本人也是近期因工做須要纔開始接觸webpack，在下文中有誤的地方還但願各位可以指出，本人也會積極改正。

2、安裝webpack

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

    $ npm webpack install -g

3、相關配置

    每一個使用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: __dirname
37       }, {
38         test: /\.css$/,
39         loader: "style-loader!css-loader"
40       },
41       {
42         test:/\.json$/,
43         loader:'json'
44       },
45       // Optionally extract less files
46       // or any other compile-to-css language
47       {
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爲正則表達式，表示後綴爲.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中還有不少文件加載器，在其餘項目中若是須要加載其餘類型文件，只需調用該類型文件加載器便可。

4、運行webpack

    webpack.config.js編寫完畢後，能夠運行webpack來查看效果。運行步驟爲：在webpack.config.js文件所在目錄的DOS命令行直接輸入webpack。下圖是我運行該項目webpack後的效果圖：

5、總結

    從上面能夠看到，webpack的配置文件能夠按照上面的結構進行編寫。而後根據項目須要，分別對輸入接口、輸出接口、插件引入、加載器配置這幾個部分進行相應修改。其實，在項目中更多的是使用webpack+gulp的方式進行文件打包管理，如今本人也正在學習gulp，後續也會寫一些gulp方面的東西。

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