Webpack-在构建时打包外部JSON
目前我有一个JSON文件,我将其存储在本地并导入为:Webpack-在构建时打包外部JSON,webpack,Webpack,目前我有一个JSON文件,我将其存储在本地并导入为: import TEAM_LIST from '../sample_info/teams'; 然而,这个JSON变得过时了。我尝试从存储JSON的URL导入数据: https://example.com/teams.json 此URL速度较慢,此javascript用于客户端。因此,我不想在每次加载应用程序时动态执行此操作。相反,每次我通过webpack构建应用程序时,我只想从URL获取这个JSON,并在构建中本地打包它 如何调整我的网页包
import TEAM_LIST from '../sample_info/teams';
然而,这个JSON变得过时了。我尝试从存储JSON的URL导入数据:
https://example.com/teams.json
此URL速度较慢,此javascript用于客户端。因此,我不想在每次加载应用程序时动态执行此操作。相反,每次我通过webpack构建应用程序时,我只想从URL获取这个JSON,并在构建中本地打包它
如何调整我的网页包文件以实现此目的?以下是我当前的配置:
/* 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'})
]
}
以下是我最终解决问题的方式
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'));
}),
]
Webpack是一个捆绑程序,而不是加载程序。请参见。我想你一定是在运行某种命令来启动WebPack吧?例如,如果你正在使用NPM,你很可能正在运行NPM运行构建或类似的程序。在您执行的脚本文件中,只需包含对自定义脚本的调用,该脚本使用wget或类似的工具将文件下载给您。下载完成后,您可以运行web pack。