Webpack 集成示例

本指南展示如何在 Webpack 项目中集成 @feoe/fs-router。

安装依赖

1npm install @feoe/fs-router -D

Webpack 配置

1// webpack.config.js
2const { FileBasedRouterWebpack as fileBasedRouter } = require('@feoe/fs-router/webpack')
3
4module.exports = {
5  entry: './src/index.tsx',
6  plugins: [
7    fileBasedRouter({
8      routesDirectory: 'src/routes',
9      generatedRoutesPath: 'src/routes.tsx',
10      enableGeneration: true,
11      typeGenerateOptions: {
12        routesTypeFile: 'src/routes-type.ts'
13      }
14    })
15  ],
16  module: {
17    rules: [
18      {
19        test: /\.tsx?$/,
20        use: 'ts-loader',
21        exclude: /node_modules/,
22      },
23    ],
24  },
25  resolve: {
26    extensions: ['.tsx', '.ts', '.js'],
27  },
28}

开发配置

1// webpack.dev.js
2const { merge } = require('webpack-merge')
3const common = require('./webpack.config.js')
4
5module.exports = merge(common, {
6  mode: 'development',
7  devtool: 'inline-source-map',
8  devServer: {
9    static: './dist',
10    historyApiFallback: true,
11  },
12})