将 JSON 文件从 webpack 主包移动到自己的文件答案

【问题标题】：Move JSON files from webpack main bundle to own files将 JSON 文件从 webpack 主包移动到自己的文件
【发布时间】：2019-04-05 04:44:18
【问题描述】：

我正在构建一个小型 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 是去这里的路吗？

【问题讨论】：

标签： javascript json webpack

【解决方案1】：

使用file-loader 不会这样做。解决方案是使用SplitChunksPlugin，它从版本 4 开始包含在 webpack 中。对于旧版本，请使用 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 规则。

【讨论】：