Inside My Mind: webpack

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
}

沒有留言:

張貼留言

Inside My Mind