How to set multiple file entry and output in project with webpack?
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 one entry/output...
directory
app
webpack.config.js
./assets
././javascripts/Administrator/Article/Create/Base.js
././javascripts/Administrator/Article/Edit/Base.js
././javascripts/Account/Index/Base.js
././javascripts/Contact/Index/Base.js
...
how to output like this?
././javascripts/Administrator/Article/Create/bundle.js
././javascripts/Administrator/Article/Edit/bundle.js
././javascripts/Account/Index/bundle.js
././javascripts/Contact/Index/bundle.js
webpack.config.js
module.exports = {
entry: {
'AdministratorArticleCreate':['./assets/javascripts/Administrator/Article/Create/Base.js']
},
output: {
path:
}
// if only one file
// entry: "./assets/javascripts/Administrator/Article/Create/Base.js",
// output: {
// // path: __dirname,
// path: "./assets/javascripts/Administrator/Article/Create/",
// filename: "bundle.js"
// }
};
For many entry points use arrays as a value of entry
property:
entry: {
app: ['./app/main.js', '.lib/index.js'],
vendors: ['react']
}
app
and vendors
are arrays, so you can put there as many file paths as you need.
For output case:
output: {
path: staticPath,
filename: '[name].js'
}
The [name]
is taken from entry
properties, so if we have app
and vendors
as properties, we got 2 output files - app.js
and vendors.js
.
Documentation link
If you want to output to multiple directories, you can use the path as the entry name. For example if you want this directory structure:
apps
├── dir1
│ └── js
│ ├── main.js [entry 1]
│ └── bundle.js [output 1]
└── dir2
├── index.js [entry 2]
└── foo.js [output 2]
Then try this in your module.exports:
{
entry: {
'dir1/js/bundle': path.resolve(__dirname, '/apps/dir1/js/main.js'),
'dir2/foo' : path.resolve(__dirname, '/apps/dir2/index.js')
},
output: {
path: path.resolve(__dirname, '/apps'),
filename: '[name].js'
},
...
}