本指南展示如何在 Webpack 项目中集成 @feoe/fs-router。
1npm install @feoe/fs-router -D
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})