vue2-multiple-entry Is it possible to write components directly in html?

Hello! Thanks for cool and helpful boilerplate.

I got a question, is it possible to make structure for pages like that – modules/ --page1/ ----index.js ----index.html --page2/ ----index.js ----index.html

So instead of writing components in index.vue I want to define it in index.js and write component in html like

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="app"></div>
    <nav>
        <navigation :items="items"></navigation>
    </nav>
</body>
</html>

Because I dont want put all my html code to js file, but want to use a few vue components on the page.

Is it possible? Thanks!

I got this webpack.config for multiple page app too, it works but bundle's are so big it includes everything and css duplicates a lot of times. https://gist.github.com/lavezzi1/f026edef2cd819fb87c692a6bb2f4459

Help please!

Oct 26 '16 07:10 lavezzi1

sorry, my english is not very good

try, build/webpack.dev.conf.js

new HtmlWebpackPlugin({
            chunks: ['vendor', entry],
            filename: entry + '.html',
            // - template: 'template/index.html',
            template: 'src/modules/'+entry+'/index.html',
            inject: true
 })

build/webpack.prod.conf.js

        new HtmlWebpackPlugin({
            chunks: ['vendor', 'common', entry],
            filename: entry + '.html',
            // - template: 'template/index.html',
            template: 'src/modules/'+entry+'/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        })

Oct 26 '16 09:10 lincenying

@lincenying It works thanks. But the structure should be very simple. Now not possible make structure like modules/ --modules1 ----modules2 --modules3 ----modules4

Can you help with that?

Oct 26 '16 09:10 lavezzi1

I will very appreciated if you take a look at my config. What I need to change to bundle vendor file like you boilerplate do? Right now my config include vendor to every chunk so size of the files is big.

Oct 26 '16 09:10 lavezzi1

This will not be able to use Object.keys(entris).forEach, The templates for each module are defined separately

build/entris.js

var fs = require('fs')
var path = require('path')
var entryPath = path.resolve(__dirname, '../src/modules')

var entris = {
  index: path.join(entryPath,'index'),
  module1: path.join(entryPath,'module1'),
  module1_module11: path.join(entryPath,'module1/module11'),
  module2: path.join(entryPath,'module2'),
  module2_module21: path.join(entryPath,'module2/module21')
}

module.exports = entris

template: 'src/modules/'+entry.replace('_', '/')+'/index.html',

This is not a good idea, but it seems that there is no other way

Not a public dependency, do not put vendor

Oct 26 '16 10:10 lincenying

Not a public dependency, do not put vendor

What you mean?

My config. https://gist.github.com/lavezzi1/f026edef2cd819fb87c692a6bb2f4459

Oct 26 '16 10:10 lavezzi1

vue2-multiple-entry vue2-multiple-entry copied to clipboard

Is it possible to write components directly in html?

vue2-multiple-entry
vue2-multiple-entry copied to clipboard