How to configure Webpack to list assets in specific directories

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'),
    ]
});
+4
source share

Source: https://habr.com/ru/post/1608956/


All Articles