2016/01/27

webpack

將 JavaScript 模組化打包減少 http request 是目前幾乎必備的技能,之前使用 requirejs 來做這一塊,後來玩了一下 webpack 後發現回不去了,以此篇做個設定與使用筆記。

webpack.config.js
var webpack = require('webpack');
var sourcePath = __dirname + '/assets/js/src';

module.exports = {
    entry: sourcePath + '/entry.js',
    output: {
        path: __dirname + '/assets/js/build',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loader: "babel", query: {presets: ['es2015']}}
        ],
    },
    resolve: {
        alias: {
            init: __dirname + '/assets/js/app/init.js'
        }
    }
};

web.config.js 是 webpack 的設定檔,將常用的東西規範好之後,執行 webpack 這個指令他便會照你的設定檔作動,entry 指的是來源檔案,如果是多個檔案要 compiler 的話可以使用物件寫法:

    entry: {
        'a': sourcePath + '/a.js',
        'b': sourcePath + '/b.js'
    },
    output: {
        path: __dirname + '/assets/js/build',
        filename: '[name].js'
    },

這樣的格式他便會照你的 key name gen 一個一模一樣的檔案在 output 資料夾,plugin 的部分我用 npm 安裝了 jQuery,並用 plugin 宣告讓他可以全域使用,不用每次都 require,壓縮的部分使用 UglifyJS 2,基本上如果不使用 plugin 的話在 command line 下 webpack --optimize-minimize 會有一樣的效果,記得如果有下壓縮編譯的話速度會慢一些,開發階段可以先關起來,module 的部分使用了 babel-loader,撰寫的程式碼都會經過 babel 的編譯,確定你的 ES6 語法可以跨瀏覽器使用,alias 的部分就是讓你少打字而已,另外如果在 command line 使用 webpack -w 便會執行監看模式,如果 entry 的檔案有所變動的話就會 auto compiler,但我喜歡自己下指令,因為我還是會稍微看一下編譯結果,接下來開一個 webpack 的資料夾,來安裝相關的模組。

npm init
npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
npm i uglify-js --save-dev
npm i jquery@1.12 --save
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack test</title>
    <script src="assets/js/build/bundle.js"></script>
</head>
<body>

</body>
</html>
assets/js/app/init.js
module.exports = {
    hello: (name = 'Chan') => {
        return `Hello world, I am ${name}`;
    }
};
assets/js/src/entry.js
var init = require('init');

$(function() {
    console.log(init.hello());
});

在 command line 執行 webpack,開啟網頁就會得到,Hello world, I am Chan,我的 VIM 有使用 JSHint 檢查原始碼,他偵測到 ES6 會報錯,只要在根目錄放置設定檔即可。

.jshintrc
{
    "esnext": true
}

沒有留言: