Webpack2 入門(4)

主要參考官網 Getting Started

本篇內容延續 Webpack2 入門(2)

本篇主要介紹:如何將我們原本打包成單一 bundle.js 改成打包成 main.js 以及 vendor.js

Getting started

在開發的過程中,我們引用的模組 node_modules 的變動頻率往往沒有我們的程式碼頻繁。如果我們每次都整個打包成 bundle.js,會造成此檔案太過大包而且打包時間相對過久。因此我們可以將載入的模組另外打包成 vendor.js,我們的程式碼打包成 main.js

打包 Main.js 及 Vendor.js

CommonsChunkPlugin(See more)

修改後的 webpack.config.js 如下:

webpack.config.js

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

module.exports = {
    entry: {
        main: './app/index.js',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist') // 打包到哪個資料夾
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor', // Specify the common bundle's name.
            minChunks: function(module) {
                // this assumes your vendor imports exist in the node_modules directory
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        })
    ]

};

執行

$ npm run build

此時我們會看到 dist 資料夾底下會有 main.js & vendor.js

修改我們的 index.html 如下:

index.html

<html>

<head>
    <title>webpack 2 demo</title>
</head>

<body>
    <a href="http://dist/vendor.js">http://dist/vendor.js</a>
    <a href="http://dist/main.js">http://dist/main.js</a>
</body>

</html>

以上就完成了,結果與只打包成 bundle.js 相同

參考

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s