Webpack 5 template

// config/paths.js
const fs = require('fs')
const path = require('path')
// process.cwd() 返回 Node.js 进程的当前工作目录
// 注：__dirname 标识被执行 js 文件所在的目录
// fs.realpathSync() 通过解析 .、.. 和符号链接，同步地计算规范路径名
// path.resolve() 将路径或路径片段的序列解析为绝对路径。
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  resolveApp,
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appSrc: resolveApp('src'),
  appDist: resolveApp('dist'),
  appTsConfig: resolveApp('tsconfig.json'),
}

// config/webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { appSrc, appHtml } = require('./paths');
module.exports = {
  entry: {
    index: './src/index.tsx',
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|jsx|tsx)$/,
        include: appSrc,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', ["@babel/preset-react", { "runtime": "automatic" }]],
          }
        }],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        include: [appSrc],
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext]'
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
        include: [appSrc],
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[hash][ext]'
        },
      },
      {
        test: /\.module\.(less)$/,
        include: appSrc,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // Enable CSS Modules features
              modules: true,
              importLoaders: 2,
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, less-loader
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    // postcss-preset-env includes autoprefixer
                    'postcss-preset-env',
                  ],
                ],
              },
            },
          },
          'less-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Stand up man!',
      template: appHtml,
    })
  ]
};

// config/webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const { appDist } = require('./paths');
const devConfig = {
  mode: 'development',
  output: {
    filename: '[name].bundle.js',
    path: appDist,
    clean: true,
  },
  devtool: 'eval-cheap-module-source-map',
  devServer: {
    //将 dist 目录下的文件 serve 到 localhost:3000 下
    hot: true,
    port: 3000,
    static: appDist
  },
}
module.exports = merge(common, devConfig)

// config/webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common')
const { appDist } = require('./paths');
const prodConfig = {
  mode: 'production', 
  output: {
    filename: '[name].[contenthash].bundle.js',
    path: appDist,
    clean: true,
  },
}
module.exports = merge(common, prodConfig)

{
  "compilerOptions": {
    "target": "es5",                                                    // 目标语言的版本
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],                                                                                // TS需要引用的库，即声明文件
    "allowJs": true,                                                    // 允许编译器编译JS，JSX文件
    "skipLibCheck": true,                                            // 忽略所有的声明文件（*.d.ts）的类型检查
    "esModuleInterop": true,                                    // 允许export=导出，由import from 导入
    "allowSyntheticDefaultImports": true,            // 允许从没有设置默认导出的模块中默认导入
    "strict": true,
    "forceConsistentCasingInFileNames": true,    // 禁止对同一个文件的不一致的引用
    "noFallthroughCasesInSwitch": true,                // 防止switch语句贯穿(即无break语句后面不会执行)
    "module": "esnext",                                                // 指定生成代码的模板标准
    "moduleResolution": "node",                                // 使用哪种模块解析策略
    "resolveJsonModule": true,                                // 是否可以导入 JSON 模块
    "isolatedModules": true,                                    // 将每个文件作为单独的模块
    "noEmit": true,                                                        // 不生成输出文件
    "jsx": "react-jsx"                                                // 在 .tsx文件里支持JSX： "React"或 "Preserve"
  },
  "include": [
    "src"
  ]
}

{
  "name": "stand-up-man",
  "version": "0.0.1",
  "description": "stand up man!",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --open --config config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js"
  },
  "keywords": [],
  "author": "hesetiema",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "babel-loader": "^8.2.5",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "postcss": "^8.4.14",
    "postcss-loader": "^7.0.0",
    "postcss-preset-env": "^7.7.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.3.0",
    "typescript": "^4.7.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2",
    "webpack-merge": "^5.8.0"
  }
}