Inside My Mind: Webpack With Vendor

2016/12/20

Webpack With Vendor

前言

之前寫過這篇 webpack，單一設定 webpack 的方式，一般來說為了減少 request，所以會希望將 js 檔案 compile 成一個，這種條件你不是從頭到尾打造這個網站的作者，了解每個頁面 dom 布局的話是相當困難的，而且從 HTTP/2 的新標準出現以後，這招已經沒有明顯的優勢了，可以參考「你的網站升級到 HTTP/2 了嗎？」這篇文章。

所以這篇文章會重新教學怎麼設定，讓你每個網頁有屬於自己的 js 檔案，但共用的套件如 jQuery 或 bootstrap 卻可以獨立，減少獨立檔案的大小。

安裝相關套件

npm i --save-dev webpack babel-core babel-loader babel-preset-es2015
npm i --save jquery bootstrap

目前主要還是用 babel 編譯較新穎的 JavaScript 語法。

檔案布局

webpack.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        a: path.resolve(__dirname, 'js/src/a'),
        b: path.resolve(__dirname, 'js/src/b'),
        vendor: ['jquery', 'bootstrap']
    },
    output: {
        path: path.resolve(__dirname, 'js/build/'),
        filename: '[name].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
        ]
    }
};

這個設定檔預計要將 js/src/ 下的 a.js 以及 b.js compile 到 js/build/，並將 jQuery 以及 bootstrap 抽出來成為 vendor，設定完成後，在根目錄執行 webpack，編譯後在 js/build/ 下會看到 a.js, b.js, vendor.bundle.js 三個檔案。

.babelrc

{
  "presets": ["es2015"]
}

這是 babel 的設定檔。

js/src/a.js

$(function() {
    $('body').append('this is a');
});

js/src/b.js

$(function() {
    $('body').append('this is a');
});
js/src/b.js
$(function() {
    $('body').append('this is b');
});

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack page a</title>
    <script src="js/build/vendor.bundle.js"></script>
    <script src="js/build/a.js"></script>
</head>
<body>
    <h3>this is a</h3>
</body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack page b</title>
    <script src="js/build/vendor.bundle.js"></script>
    <script src="js/build/b.js"></script>
</head>
<body>
    <h3>this is b</h3>
</body>
</html>

執行 a.html以及 b.html 就會看到各自的效果了。

沒有留言:

張貼留言

Inside My Mind