Webpack - 在构建时打包外部 JSON答案

【问题标题】：Webpack - Package External JSON on BuildWebpack - 在构建时打包外部 JSON
【发布时间】：2018-05-05 07:10:15
【问题描述】：

目前我有一个 JSON 文件存储在本地并导入为：

import TEAM_LIST from '../sample_info/teams';

但是这个 JSON 变得陈旧了。我正在尝试从存储 JSON 的 URL 导入数据：

https://example.com/teams.json

这个 URL 很慢，这个 javascript 是为客户目的而设计的。因此，我不想在每次加载我的应用程序时动态地执行此操作。相反，每次我通过 webpack 构建应用程序时，我只想从 URL 中获取这个 JSON 并将其打包到本地构建中。

如何调整我的 webpack 文件来做到这一点？这是我目前的配置：

/* eslint-disable */
var webpack = require('webpack');
var path = require('path');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {

  entry: {
    user: ['./client/index.js'],
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: "/static_/",
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loaders: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|jpg|otf|woff2)$/,
        loader: 'url-loader'
      }

    ]
  },

  resolve: {
    extensions: ['.js', '.jsx']
  },

  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new BundleTracker({filename: './webpack-stats.json'})
  ]

}

【问题讨论】：

Webpack 是一个打包器，而不是一个加载器（参见extensive discussion here）。我想你一定是在运行某种命令来启动 webpack 吧？例如。如果你使用 NPM，你很可能会运行 npm run build 或类似的东西。在您执行的脚本文件中，只需包含对自定义脚本的调用，该脚本使用wget（或类似的东西）将文件下载给您。下载完成后，您可以运行 web pack。

标签： webpack

【解决方案1】：

这就是我最终解决的方法。

  plugins: [
    new webpack.WatchIgnorePlugin([
      path.resolve(__dirname, './client/precached_data/'),
    ]),
    new WebpackPreBuildPlugin(function(stats) {
      // Do whatever you want before build starts...
      var file = fs.createWriteStream("sample_info/teams");
      var response = request('GET', "https://example.com/teams.json");
      file.write(response.body.toString('utf-8'));

    }),
  ]

【讨论】：