Webpack4.0-React Hooks-ts-antd4.0前端脚手架构建

技术集合

1. WebPack

2. Antd

3. React

4. less

Github地址

代码Example

package.json配置文件

{
  "name": "hello-hooks-ts-webpack",
  "sideEffects": false,
  "version": "1.3.1",
  "description": "reacthooks, ts, webpack",
  "private": true,
  "scripts": {
    "test": "jest --watchAll --colors --coverage",
    "watch": "webpack --watch",
    "server": "node server.js",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "lint": "prettier --write 'src/**/*.{ts,tsx}'",
    "release": "standard-version",
    "commit": "git-cz"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint && git add ."
    }
  },
  "author": "wcharles666@github.com",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "@babel/preset-typescript": "^7.10.1",
    "@commitlint/cli": "^9.1.1",
    "@commitlint/config-conventional": "^9.1.1",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "@typescript-eslint/eslint-plugin": "^3.1.0",
    "autoprefixer": "^9.8.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "cz-conventional-changelog": "^3.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.5.0",
    "eslint": "^7.1.0",
    "express": "^4.17.1",
    "file-loader": "^6.0.0",
    "git-cz": "^4.7.0",
    "html-webpack-plugin": "^4.3.0",
    "husky": "^4.2.5",
    "jest": "^26.1.0",
    "less": "^3.11.1",
    "less-loader": "^6.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-pxtorem": "^5.1.1",
    "prettier": "^2.0.5",
    "react-router-dom": "^5.2.0",
    "standard-version": "^8.0.2",
    "style-loader": "^1.2.1",
    "typescript": "^3.9.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2",
    "webpackbar": "^4.0.0"
  },
  "dependencies": {
    "@types/classnames": "^2.2.10",
    "antd": "^4.3.0",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.0",
    "classnames": "^2.2.6",
    "lodash": "^4.17.15",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "three": "^0.117.1",
    "three-orbitcontrols": "^2.110.3"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

webpack相关配置

webpack.common.js

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackBar = require('webpackbar');
module.exports = {
  entry: {
    app: './src/index.tsx',
  },
  plugins: [
    new CleanWebpackPlugin(),
    new WebpackBar(),
    new HtmlWebpackPlugin({
      // 打包启用的模板,
      title: 'Production',
      template: path.join(__dirname, '/src/index.html'),
      filename: 'index.html',
      minify: {
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true, //删除空白符与换行符
      },
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  output: {
    filename: 'static/js/[name].[hash].js',
    publicPath: '/',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    alias: {
      '@': path.join(__dirname, './src'), // @就表示根目录src这个路径
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: [
          'style-loader', // creates style nodes from JS strings
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          'style-loader', // creates style nodes from JS strings
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader'],
      },
    ],
  },
};

webpack.dev.js

const merge = require('webpack-merge');
const proxy = require('http-proxy-middleware');
const common = require('./webpack.common.js');

//context可以是单个字符串，也可以是多个字符串数组，分别对应你需要代理的api,星号（*）表示匹配当前路径下面的所有api
const context = [`/*`];

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true,
    port: 8888,
    historyApiFallback: true,
    // proxy: [
    //   {
    //     context: context,
    //     target: 'http://127.0.0.1:3000',
    //     secure: false,
    //   },
    // ],
  },
});

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  devtool: 'source-map',
  plugins: [
    new UglifyJSPlugin({
      sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
});