Multi-page applications

  • A+
所属分类:vue webpack

What if we have a multi-page app? Lets say, we have two html files — index.html and settings.html. index.html uses app.js and settings.html might be using settings.js
Again, we can specify multiple entry points in webpack.config to output multiple bundles.
Also, we need to add one more instance of HtmlWebpackPlugin in the plugins array for it to generate settings.html for us:

1. Under ‘./src/scripts’ folder, add a new file settings.js:

Multi-page applications

2. Update the webpack.config.js as below:


var HtmlWebpackPlugin = require('html-webpack-plugin');
var package     = require('../package.json');

module.exports = {
    entry: {
        app: "./src/scripts/app.js",
        vendor: Object.keys(package.dependencies),
        settings: "./src/scripts/settings.js"
    }, 
    output: {
        filename: "./dist/[name].bundle.js" 
    },
    watch:true,
    resolve: { extensions: [".js", ".ts"] },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            title: 'My Awesome application',
            myPageHeader: 'Hello World',
            template: './src/index.html',
            chunks: ['vendor', 'app'],
            filename: './dist/index.html' //relative to root of the application
        }),
        new HtmlWebpackPlugin({
            hash: true,
            title: 'My Awesome application',
            myPageHeader: 'Settings',
            template: './src/index.html',
            chunks: ['vendor', 'settings'],
            filename: './dist/settings.html' 
        })
   ]

}

Again, lets go over the changes we made above in webpack.config.js :

a. Line#8 - we added an additional key settings in entry to tell webpack to create an additional bundle for settings.js and its dependencies.

b. In the plugins array, we added another instance of HtmlWebpackPlugin (line#24) with filename = ‘./dist/settings.html’and template = ‘./src/index.html’ . This would create settings.html for us using the same template ‘index.js’

c. Note the new ‘chunks’ property we added in each HtmlWebpackPlugininstance (line#21 and 29)
In the first instance, which is for index.html, we are adding ‘vendor’ and ‘app’ chunks. This means, the HtmlWebpackPlugin wound insert <script> tags for each of these two chunks i.e. vendor.bundle.js and app.bundle.js

Similary, the second instance, which is for settings.html, we added ‘vendor’ and ‘settings’ chunks, so that it would have the <script> tags for vendor.bundle.js and settings.bundle.js

3. Run npm start for webpack to run with the updated config options.

$ npm start

4. This time you would notice webpack created three expected bundled files in the ‘dist’ folder — app.bundle.js, vendor.bundle.js and settings.bundle.js.HtmlWebpackPlugin created two html files viz. index.html and settings.html.

Multi-page applications

./dist/index.html — generated by HtmlWebpackPlugin with two embedded <script> tags — for the two files app.bundle.js and vendor.bundle.js.

Multi-page applications

./dist/settings.html — generated by HtmlWebpackPlugin with two embedded <script> tags — for the two files vendor.bundle.js and settings.bundle.js.

5. In the browser, the index.html would remain the same as we didn’t make any change to it.

Multi-page applications

6. Open the newly created settings.html in the browser, the message logged to console in 'settings.js' should be visible in the browser console:

Multi-page applications

weinxin
我的微信
欢迎来撩!!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: