Currently, Webpack is pushing everything (HTML, CSS, JS, etc.) into the directory specified in output.path. Ideally, I would like to separate them so that the assets are contained in their own folder, supporting the correct attributes srcin index.htmlthat are generated html-webpack-plugin.
For example:
build/
index.html
css/
main.49587349.css
js/
vendor.52736973.js
app.988734120.js
vendor.52736973.map.js
app.988734120.map.js
img/
image.jpg
image.png
Is there a way to redirect the output of your assets to a more reasonable directory structure? Or am I pushing too hard on how Webpack wants me to work?
My current webpack configuration:
entry: {
app: path.resolve(ROOT_PATH, 'app'),
vendor: Object.keys(pkg.dependencies)
},
output: {
path: path.join(ROOT_PATH, 'build'),
filename: '[name].[chunkhash].js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: path.resolve(ROOT_PATH, 'app'),
exclude: /node_modules/
},
{
test: /\.css$/,
loader: extractTextPlugin.extract('style', 'css'),
include: path.resolve(ROOT_PATH, 'app')
}]
},
plugins: [
new HtmlwebpackPlugin({
title: 'Podcasting',
template: './app/templates/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.CommonsChunkPlugin(
'vendor',
'[name].[chunkhash].js'
),
new clean(['../build']),
new extractTextPlugin('styles.[chunkhash].css'),
]
});