webpack 項目實踐

1，必要的環境

• node 環境 下載地址（http://nodejs.cn/）
• npm 貌似 下載地址（https://www.npmjs.com/）不過，貌似 Node 安裝可自帶 npm。

2, 創建項目工程

利用npm來初始化一個項目的工程文件，在命令窗口中找到項目文件

npm init

執行以上代碼後，會在項目文件根目錄生成一個 package.josn 文件（配置文件）

之後，安裝的包的時候，使用 npm install ‘包名’ --save-dev 均可以把安裝的包記錄到 配置文件中，這樣作的目的是，當你遷移項目的時候，只須要把你本身的代碼打包走，而後帶着 package.json 就能夠直接遷移依賴包了。

3，創建 webpack 配置文件

這個須要咱們手工創建，通常的配置文件名稱默認寫：webpack.config.js,

在此以前，須要咱們利用 npm 來安裝 webpack，通常咱們安裝到全局：

npm install webpack -g

而後，根據咱們的實際狀況來抒寫咱們的配置：

module.exports = {

    // 基礎路徑
    context : __dirname + '/src/script',

    // 入口點，
    entry : {
        bindPhone : './bindPhone'
    },

    // 出口點
    output : {
        filename : '[name].bundle.js',
        path : __dirname + '/built'
    },

    // 模塊加載器，可解決不兼容 commonjs 的插件
    module : {
        loaders : [
            { test : require.resolve('jquery'), loader : 'expose?$!expose?jQuery'},
            { test : require.resolve('./src/script/lib/jquery.mockjax.min.js'), loader : 'exports?window.mockajax'}
            
            
        ]
    }
}

具體每一個配置項有什麼用，可參看 API(http://webpack.github.io/docs/configuration.html)

4, 實際工做中遇到的問題

1. 如何下手寫？

   我是直接在 html 中引用經過webpack 編譯好的 js 文件，由於我知道webpack 會把在這個頁面或則項目中用到的js都打包到此文件中。

   <script src="../../buit/bindPhone.bundle.js"></script>

2. 如何編寫本身的業務模塊代碼？

   由於 webpack 是兼容 AMD 規範和 commonjs 的，因此，咱們能夠利用 require()來加載依賴包，也能夠用 define() 來定義咱們的模塊。固然，更好的是直接抒寫：

   var $ = require('jquery');
   
    require('./lib/jquery.mockjax.min.js');
   
    var Mock = (function(){
        ...
    })()
   
    module.exports = Mock;

3. 如何處理基於jquery的第三方插件？

   實際工做中，由於暫時沒有後臺提供接口，所以，我就利用 mockjax 來模擬後臺響應，這個插件依賴於 jquery 而且其自己不是AMD規範或則commonjs，因此遇到不少問題：

   第一個問題 ： jquery 未定義？
   由於他依賴於jquery，可是咱們並未在全局設定 jquery 對象，所以會報錯，即便在 js 文件中 require('jquery') 也不行

   var $ = require('jquery');
   require('./lib/jquery.mockjax.min.js');

   想這種相似的處理第三方的，咱們通常解決辦法是使用 shimming，要在 webpack 配置文件中把 jquery 變成全局變量

   // 模塊加載器，可解決不兼容 commonjs 的插件
       module : {
           loaders : [
               { test : require.resolve('jquery'), loader : 'expose?$!expose?jQuery'}
           ]
       }

   處理此方法咱們依賴於 expose-loader，因此，咱們要安裝包 npm install expose-loader --save-dev

4. 在開發中，咱們常常修修改改，難道每次都要 webpack 一下（編譯）？

   可使用 --watch 來監聽文件變化，並執行編譯。

   webpack --watch
   
   可是，我發現運行並很差事，全部我就用gulp來監聽js文件變更，而後執行 webpack