線上讀書會有邀請到 昱安大大跟 howard 大大 主講 webpack 非常的精彩仔細,很推薦給大家

https://www.youtube.com/watch?v=KEtmaPM_CJI

https://www.youtube.com/watch?v=vlsvTEm6CKU

學習心得分享

webpack 可以想像是把很多程式碼 js,跟 img 做一個整合打包的動作

學習中在使用webpack時候最難搞懂的就是設定檔
介紹幾個的webpack指令

webpack : 開始執行webpack
webpack -p : 產品化指令,可以壓縮代碼
webpack --watch : 長期監聽,程式如果有更動就會有hot reload
webpack -d : 加入 source maps 對應 檔案

接下來看一個常用的webpack.config.js格式

module.exports = {
  entry: './main.js',    //進入程式的入口點
  output: {
    filename: 'bundle.js'   //打包成一個檔案,這邊有時候會看到有多個表示輸出多個js
  },
  module: {
    loaders: [               //解析器,也有其他的解析器
      { test: /\.css$/, loader: 'style-loader!css-loader' },  //這邊的!是串連的意思
      { test: /\.js$/, loader: 'jsx-loader?harmony' } //這邊?後面是參數的意思
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} 
    ]
  },
  resolve: {
    // 有在這邊設定過後,程式碼裡面如果有import到這些檔案名稱就可以省略
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};

loaders 這個解析器 可以放入很多不同的解析器
格式 { test: /.js$/, loader: 'jsx-loader?harmony' } 這個意思就是解析 js 然後解析器是 jsx-loader

如果希望每個頁面有各自獨立的js 可以使用下面這種寫法 注意一提的是 [name].js 這是output上面entry所有的js的意思

module.exports = {
  entry: {
    Profile: './about.js',
    Feed: './contact.js'
  },
  output: {
    path: 'build',
    filename: '[name].js',   
  }
};

個人常使用的plugin 心得分享
l

Hot Module Replacement Plugin
//修改程式碼的時候可以動態看到修改後的結果,通常也可以在終端機中下指令啟動 webpack-dev-server --devtool eval --progress --colors --hot --content-base build
但另外一種做法在程式碼中使用環境變數去偵測是否是在本機或是產品, 本地端的時候就直接載入

...
var webpack = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    webpackConfig = require('../webpack.config.js');

module.exports = function() {
    var compiler = webpack(webpackConfig);

    var bundler = new WebpackDevServer(compiler, {
        publicPath: '/build/',
        hot: true,
        quiet: false,
        noInfo: true,
        stats: {
            colors: true
        }
    });

    bundler.listen(8080, 'localhost', function() {
        console.log('Webpack-dev-server is live on port 8080');
    });
};

...

Extract Text Plugin //把所有的css整合成一個
UglifyJsPlugin //把js用些編碼讓人無法第一時間看出代碼
HtmlWebpackPlugin //自動產出一隻index.html當entry
以下為plugin常見語法

...
plugins: [
    new Webpack.optimize.UglifyJsPlugin({ 
        compress: {
            warnings: false
        }
    })
]

...