目前,Webpack正在将所有内容(HTML,CSS,JS等)推送到output.path
中指定的目录中。理想情况下,我很乐意将这些资源分开,以便资源包含在自己的特定文件夹中,同时保持src
内由index.html
生成的html-webpack-plugin
属性。
例如:
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
您是否有办法将资产输出重定向到更合理的目录结构?或者我是否过分反对Webpack希望我工作的方式?
我当前的Webpack配置是:
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'),
]
});