这应该可以解决您的问题;)
文件结构
src
├── actions
│ ├── index.html
│ └── index.js
└── options
├── index.html
└── index.js
webpack.config.js
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
actions: './src/actions/index.js',
options: './src/options/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]/index.js'
},
plugins: [
new HtmlWebPackPlugin({
template: './src/actions/index.html',
filename: 'actions/index.html',
chunks: ['actions']
}),
new HtmlWebPackPlugin({
template: './src/options/index.html',
filename: 'options/index.html',
chunks: ['options']
})
]
};
还有一个更正确的版本;)
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ENTRY = {
actions: './src/actions/index.js',
options: './src/options/index.js'
}
const entryHtmlPlugins = Object.keys(ENTRY).map(entryName => {
return new HtmlWebPackPlugin({
template: `./src/${entryName}/index.html`,
filename: `${entryName}/index.html`,
chunks: [entryName]
});
});
module.exports = {
entry: ENTRY,
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]/index.js'
},
plugins: entryHtmlPlugins
};
我在github上创建了一个分支多输出 https://github.com/tomik23/webpack-babel-corejs/tree/many-outputs