將JSON文件從Webpack主捆綁包中移出

Question

我正在構建一個小型Web應用程序，在其中從多個JSON文件加載數據。

import config from './config.json';
import data from './data.json';

console.log(config, data)

對於我的webpack構建，我想從包中排除JSON文件，因為它們很大（可以異步加載）。 目前，我正在嘗試使用file-loader來實現此目的。

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: '#cheap-source-map',
  resolve: {
    modules: ['node_modules']
  },
  entry: {
    main: path.resolve('./index.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve('./dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        type: 'javascript/auto',
        test: /\.json$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ]
};

通過這種配置，我可以獲得單獨的文件，但是不會導入它們。 在這種特殊情況下， console.log()僅將文件名返回為字符串data.json和config.json 。 似乎實際的JSON文件未加載。

我究竟做錯了什么？ file-loader是前往此處的方式嗎？

Answer 1

使用file-loader不會這樣做。 該解決方案是使用SplitChunksPlugin ，它包含在自的WebPack版本4.對於舊版本使用CommonsChunkPlugin 。

這是一個有效的webpack.config.json文件：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: '#cheap-source-map',
  resolve: {
    modules: ['node_modules']
  },
  entry: {
    main: path.resolve('./index.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve('./dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        data: {
          test: /\.json$/,
          filename: '[name].js',
          name(module) {
            const filename = module.rawRequest.replace(/^.*[\\/]/, '');
            return filename.substring(0, filename.lastIndexOf('.'));
          },
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ]
};

文件被加載到應用程序中（請參閱DevTools中的請求）， console.log(config, data)輸出一個數組/對象。

但是，此解決方案會將JSON文件輸出為JavaScript。 這對我來說很好用，但是如果您依賴於文件為JSON，則可能會出現問題。 一個簡單的config.json的示例：

(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[function(n){n.exports={name:"test"}}]]);

如果您對源地圖感到困擾，則可以使用SourceMapDevToolPlugin指定exclude規則。