<commit_before>const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const routerPrefix = '/react-router'

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }, {
        test: /\.(js|jsx)$/,
        use: [{
          loader: 'babel-loader',
          // 该选项必须添加
          query: {
            presets: ['es2015', 'stage-0', 'react']
          }
        }]
      }, {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },
  // https://webpack.docschina.org/configuration/dev-server/#devserver-historyapifallback
  // /home 页面无法访问的解决办法，这是在 webpack-dev-server 层面需要支持的
  // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。通过传入以下启用：
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        prefix: JSON.stringify(routerPrefix)
      }
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}
<commit_msg>docs: 更新之前 /home 不生效的解释说明<commit_after>const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const routerPrefix = '/react-router'

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }, {
        test: /\.(js|jsx)$/,
        use: [{
          loader: 'babel-loader',
          // 该选项必须添加
          query: {
            presets: ['es2015', 'stage-0', 'react']
          }
        }]
      }, {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },

  // /home 页面无法访问的原因其实是 webpack-dev-server 如何定位文件的原理
  // webpack-dev-sever 如何定位文件呢
  // webpack-dev-sever 是静态资源服务器，他会通过你的 output 配置去读取文件，通过’/’分割以文件查找的模式匹配文件。
  // 这样自然就产生问题了，因为你配置的路由并不是实际存在的文件，根据文件查找的方式是找不到的，只会 404。
  // https://webpack.docschina.org/configuration/dev-server/#devserver-historyapifallback
  // /home 页面无法访问的解决办法
  // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。通过传入以下启用：`historyApiFallback: true`
  // 加入后，可以看到 webpack-dev-server 启动后的 log 中有一行 `404s will fallback to /index.html`
  // 意味着原本会进入 /home 目录下查找，但在设置后路径会执行 index.html
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        prefix: JSON.stringify(routerPrefix)
      }
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}

{'fraction_non_alphanumeric': 0.15398293029871976, 'fraction_numerical': 0.008534850640113799, 'mean_word_length': 2.1220865704772476, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '911794', 'n_tokens_mistral': 1150, 'n_tokens_neox': 1152, 'n_words': 170}