使用 webpack 的静态文件和 ajax 请求答案

【问题标题】：Static files and ajax requests with webpack使用 webpack 的静态文件和 ajax 请求
【发布时间】：2015-09-28 19:16:51
【问题描述】：

如何使用 webpack 将静态文件/文件夹（*.json、图像等）包含到包中？对文件的访问将通过运行时的 ajax 请求。

【问题讨论】：

示例：其中 USER_STATUS 是一些变量，可以有不同的值，例如禁用 (./images/disabled.png)、启用 (. /images/enabled.png)、待处理等？

标签： reactjs package packaging webpack static-files

【解决方案1】：

您不会捆绑 json 或图像。您从服务器调用它们。使用节点服务器，它看起来像这样。您的文件路径将相对于 ui-dist/。

    'use strict';

    var Emitter = require('primus-emitter');
    var express = require('express');
    var favicon = require('serve-favicon');
    var path = require('path');
    var Primus = require('primus');
    var socketCallBack = function(socket){ require('./mainsocket.js')(socket); };
    var port = Number(process.env.PORT || 3700);

    //console.log('Port: ' + port);

    var app = express();
    app.use(favicon(path.join(__dirname, '..', 'ui-dist', 'img', 'favicon.ico')));

    var server = app.listen(port);
    var sio = new Primus(server, { transformer: 'websockets', parser: 'JSON' });
    sio.use('emitter', Emitter);

    var newPrimusOptions = false;
    if (newPrimusOptions) {
        sio.library();
        sio.save('./ui-src/lib/primus/primus.js');
    }

    sio.on('connection', socketCallBack);

    app.use('/', express.static('ui-dist'));
    app.get('/', function(req, res){ res.sendfile(__dirname + '/index.html', [], null); });

【讨论】：

不是我想要的。我一直期待 webpack 有一些配置，您可以在其中简单地包含包含静态内容的文件夹。

【解决方案2】：

我能够使用将特定内容复制到构建文件夹的 webpack 插件来实现这一点。

https://github.com/kevlened/copy-webpack-plugin

在您的 webpack.config 文件中，您可以执行以下操作：

plugins: [
    new CopyWebpackPlugin([
        { 
           from: 'from/file.txt', to: 'to/file.txt' 
        },
    ]),
],

【讨论】：