Webpack: 使用 Django 存储加载来自 S3 的代码分割块

Question

我正在使用django存储来从s3中提供我的静态文件，并且正在将它们全部移动到webpack bundle中。这对于不关心django找到bundle的位置的django-webpack-loader非常有效。

然而，当我开始使用require.ensure定义分割点时，该bundle尝试使用相对路径而不是s3存储桶来下载该chunk，因为webpack的代码拆分功能与django存储无关。

有没有一种方法来注入自定义逻辑以按需获取chunks？ 我可以硬编码我的s3 bundle地址到配置文件中，但是迄今为止我所尝试的都没有起作用。

以下是我的webpack配置（使用coffeescript编写）。

path = require "path"
webpack = require 'webpack'
BundleTracker = require 'webpack-bundle-tracker'
ExtractTextPlugin = require "extract-text-webpack-plugin"
loaders = require "./loaders.coffee"

module.exports =
    context: __dirname
    entry: require "./entries.coffee"
    output:
        path: path.resolve 'app/static/dist/'
        filename: '[name].js'
        sourceMapFilename: "[name].map.js",
    devtool: "source-map"

        plugins: [

            new BundleTracker filename: './webpack/webpack-stats-prod.json'

            new webpack.DefinePlugin
            'process.env':
                'NODE_ENV': JSON.stringify 'production'

            new webpack.optimize.OccurenceOrderPlugin

            new ExtractTextPlugin "[name].css"

            new webpack.optimize.UglifyJsPlugin
            sourceMap: false
            compressor:
                warnings: false


        ]

    module:
        loaders: loaders.production_loaders

    resolve: loaders.resolution

- Jake

Answer 1

原来我只需要在output下设置publicPath选项。我设置了我的ansible脚本将bucket地址写入附近的文件中。

{bucket} = require "./bucket.json"


module.exports =
    context: __dirname
    entry: require "./entries.coffee"
    output:
        path: path.resolve 'app/static/dist/'
        filename: '[name].js'
        sourceMapFilename: "[name].map.js",
        publicPath: bucket + "/static/dist/"

- Jake