webpack初見

1、什麼是webpack? 他有什麼優勢？

    首先對於不少剛接觸webpack人來講，確定會問webpack是什麼？它有什麼優勢？咱們爲何要使用它？帶着這些問題，咱們來總結下以下：

    Webpack是前端一個工具，可讓各個模塊進行加載，預處理，再進行打包，它能有Grunt或Gulp全部基本功能。優勢以下：

1. 支持commonJS和AMD模塊。
2. 支持不少模塊加載器的調用，可使模塊加載器靈活定製，好比babel-loader加載器，該加載器能使咱們使用ES6的語法來編寫代碼。
3. 能夠經過配置打包成多個文件，有效的利用瀏覽器的緩存功能提高性能。
4. 使用模塊加載器，能夠支持sass，less等處理器進行打包且支持靜態資源樣式及圖片進行打包。
5. 更多等等。。。帶着這些問題咱們慢慢來學習webpack。二：如何安裝和配置

二：如何安裝和配置

1.咱們常規直接使用 npm 的形式來安裝：

$ npm install webpack -g

固然若是常規項目仍是把依賴寫入 package.json 包去更人性化：

$ npm init
$ npm install webpack --save-dev

2.配置webpack

每一個項目下都必須配置有一個 webpack.config.js ，它的做用如同常規的 gulpfile.js/Gruntfile.js ，就是一個配置項，告訴 webpack 它須要作什麼。

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
 
module.exports = {
    //插件項
    plugins: [commonsPlugin],
    //頁面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件輸出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加載器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解決方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //絕對路徑
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

配置說明：

1).entry

能夠是個字符串或數組或者是對象。

當entry是個字符串的時候，用來定義入口文件：

entry: './js/main.js'

當entry是個數組的時候，裏面一樣包含入口js文件，另一個參數能夠是用來配置webpack提供的一個靜態資源服務器，webpack-dev-server。webpack-dev-server會監控項目中每個文件的變化，實時的進行構建，而且自動刷新頁面：

entry: [
     'webpack/hot/only-dev-server',
     './js/app.js'
 ]

2).output

參數是個對象，用於定義構建後的文件的輸出。其中包含path和filename：

output: {
        path: 'dist/js/page',
        filename: '[name].js'
},

3).module

關於模塊的加載相關，咱們就定義在module.loaders中。這裏經過正則表達式去匹配不一樣後綴的文件名，而後給它們定義不一樣的加載器。好比說給less文件定義串聯的三個加載器（！用來定義級聯關係）：

module: {
        //加載器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
},

4).resolve

webpack在構建包的時候會按目錄的進行文件的查找，resolve屬性中的extensions數組中用於配置程序能夠自行補全哪些文件後綴：

resolve: {
        root: 'E:/github/flux-example/src', //絕對路徑
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
}

3、運行 webpack

ebpack 的執行也很簡單，直接執行

$ webpack --display-error-details

便可，後面的參數「--display-error-details」是推薦加上的，方便出錯時能查閱更詳盡的信息（好比 webpack 尋找模塊的過程），從而更好定位到問題。

其餘主要的參數有：

$ webpack --config XXX.js   //使用另外一份配置文件（好比webpack.config2.js）來打包
 
$ webpack --watch   //監聽變更並自動打包
 
$ webpack -p    //壓縮混淆腳本，這個很是很是重要！
 
$ webpack -d    //生成map映射文件，告知哪些模塊被最終打包到哪裏了

 

參考網址：http://www.cnblogs.com/Leo_wl/p/4862714.html

                 http://www.w2bc.com/Article/50764