如何配置Webpack以将资产输出到特定目录

时间:2015-09-25 08:39:11

标签: webpack

目前,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'),
    ]
});

0 个答案:

没有答案