How to set multiple file entry and output in project with webpack?

Question

How to set multiple file entry/output in project with webpack?

I follow http://webpack.github.io/docs/tutorials/getting-started/ success compile if only one file in

Answer 1

this webpack plugin web-webpack-plugin can resolve it in a sample way.

AutoWebPlugin can find all page entry in an directory,then auto config an WebPlugin for every page to output an html file,you can use it as below:

webpack config

module.exports = {
    plugins: [
        new AutoWebPlugin(
            // the directory hold all pages
            './src/', 
            {
            // the template file path used by all pages
            template: './src/template.html',
            // javascript main file for current page,if it is null will use index.js in current page directory as main file
            entity: null,
            // extract common chunk for all pages and then put it into a file named common,if it is null then not do extract action
            // achieve by CommonsChunkPlugin
            commonsChunk: 'common',
            // pre append to all page's entry
            preEntrys:['./path/to/file1.js'],
            // post append to all page's entry
            postEntrys:['./path/to/file2.js'],
        }),
    ]
};

src directory

── src
│   ├── home
│   │   └── index.js
│   ├── ie_polyfill.js
│   ├── login
│   │   └── index.js
│   ├── polyfill.js
│   ├── signup
│   │   └── index.js
│   └── template.html

output directory

├── dist
│   ├── common.js
│   ├── home.html
│   ├── home.js
│   ├── ie_polyfill.js
│   ├── login.html
│   ├── login.js
│   ├── polyfill.js
│   ├── signup.html
│   └── signup.js

AutoWebPlugin find all page home login signup directory in ./src/,for this three page home login signup will use index.js as main file and output three html file home.html login.html signup.html`

see doc:auto detect html entry