webpack配置react+antd+ts

初始化webpack

mkdir web-react
cd web-react
npm init -y

安裝webpack、webpack-cli、webpack-dev-server

開始安裝webpack三件套

npm install --D webpack webpack-cli webpack-dev-server

安裝antd、typescript、react

安裝antd、typescript、react、react-dom、react-router-dom

npm install -S antd typescript react react-dom react-router-dom

安裝loader

安裝babel-loader、@bebel/core、@babel/preset-env、@babel/preset-react、@babel/preset-typescript、css-loader、style-loader、less-loader、less、source-map-loader、url-loader、file-loader

npm install -S babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript css-loader style-loader less-loader less source-map-loader url-loader file-loader

安裝plugins

安裝plugins。
clean-webpack-plugin：只作用於生產環境，用來清除上一次打包的文件
hard-source-webpack-plugin：作用於開發環境，用於快速更新
html-webpack-plugin：用於快速生成動態的html
mini-css-extract-plugin：css壓縮
optimize-css-assets-webpack-plugin：抽取css爲單獨文件
webpack-bundle-analyzer：只作用於生產環境，用來分析打包文件

npm install -D clean-webpack-plugin hard-source-webpack-plugin html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin webpack-bundle-analyzer 

安裝types及其餘插件

terser-webpack-plugin：壓縮js文件

npm install -S @types/react @types/react-dom @types/react-router-dom @types/node terser-webpack-plugin add-asset-html-webpack-plugin

npm命令

"start": "webpack-dev-server --open  --config ./config/webpack.config.js --mode development",
"build": "webpack --config ./config/webpack.config.js --mode production",
"dll": "webpack --config ./config/webpack.dll.js"

配置文件

config/utils.js文件

// utils.js
const path = require('path');
// 抽取css代碼
const MiniCssRxtractPlugin = require('mini-css-extract-plugin');
// 選取最後一個值
const mode = process.argv.slice(-1)[0];
const isPro = mode === 'production';
// cssloader對象
const cssLoder = {
  'production': {
    loader: MiniCssRxtractPlugin.loader,
  },
  'development': {
    loader: "style-loader"
  }
}

// tsx解析器
const tsxLoader = {
  test: /\.tsx?$/,
  use: [{
    loader: 'babel-loader',
    options: {
      presets: ["@babel/env", "@babel/react", '@babel/preset-typescript'],
      plugins: [
        ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
      ]
    }
  }]
}

// 緩存解析器
const sourceLoader = {
  enforce: "pre",
  test: /\.js$/,
  loader: "source-map-loader"
}

// css 解析器
const cssLoader = {
  test: /\.css$/,
  use: [cssLoder[mode], {
    loader: 'css-loader',
  }]
}

// less解析器
const lessLoader = {
  test: /\.less$/,
  use: [cssLoder[mode], {
    loader: 'css-loader',
  }, {
    loader: 'less-loader',
    options: {
      lessOptions: {
        modifyVars: require(path.resolve(__dirname, 'modifyVars.js')),
        javascriptEnabled: true,
      }
    }
  }]
}

module.exports = {
  mode, isPro, tsxLoader, sourceLoader, cssLoader, lessLoader
}

webpack.config.js

const path = require('path');
// 動態生成html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除文件夾
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 抽取css代碼
const MiniCssRxtractPlugin = require('mini-css-extract-plugin');
// 控制檯刪除無效的打印
// const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
// 壓縮css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 給模塊做緩存
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
// 生產包分析
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// js壓縮
const TerserPlugin = require('terser-webpack-plugin');
// 
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
//
const Webpack = require('webpack');

const { mode, isPro, lessLoader, cssLoader, tsxLoader, sourceLoader } = require('./utils');

module.exports = {
  // 入口
  entry: "./src/index.tsx",

  // 出口
  output: {
    filename: "static/js/[name].js",
    path: path.join(__dirname, '../dist')
  },

  // 生產模式下關閉map文件
  devtool: isPro ? "none" : "source-map",

  // 解析相關
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
  },

  // 模塊
  module: {
    rules: [tsxLoader, isPro ? null : sourceLoader, cssLoader, lessLoader].filter(Boolean),
  },

  // 插件
  plugins: [
    new MiniCssRxtractPlugin({
      filename: 'static/styles/[name].css',
      chunkFilename: 'static/styles/[name].css'
    }),
    new Webpack.DllReferencePlugin({
      manifest: path.join(__dirname, '../dll/vendor-manifest.json')
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      inject: true,
      minify: {
        removeComments: true,                   // 移除註釋
        collapseWhitespace: true,               // 移除空格
      }
    }),
    new AddAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, '../dll/dll.vendor.js'),
    }),
    // new FriendlyErrorsPlugin(),
    mode === 'development' ? new Webpack.HotModuleReplacementPlugin() : null,
    mode === 'development' ? new HardSourceWebpackPlugin() : null,
    mode === 'production' ? new CleanWebpackPlugin() : null,
    mode === 'production' ? new TerserPlugin({
      cache: true,
      parallel: true,
      sourceMap: true,
    }) : null,
    mode === 'production' ? new BundleAnalyzerPlugin() : null
  ].filter(Boolean),

  // 關閉文件過大檢查
  performance: {
    hints: false
  },

  // 優化
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 6,
      maxInitialRequests: 4,
      automaticNameDelimiter: '~',
      cacheGroups: {
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'react',
          chunks: 'all',
          priority: 10 // 需要級別高點
        },
        antd: {
          test: /[\\/]node_modules[\\/]antd[\\/]/,
          name: 'antd',
          chunks: 'all',
          priority: 10 // 需要級別高點
        },
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
          priority: 9
        },
        commons: {
          test: /src/,
          name: 'commons',
          chunks: 'all',
          priority: 9
        }
      }
    },

    runtimeChunk: {
      name: 'runtime'
    },

    minimizer: [
      new OptimizeCSSAssetsPlugin({
        cssProcessor: require('cssnano'), //引入cssnano配置壓縮選項
        cssProcessorOptions: {
          discardComments: { removeAll: true }
        },
        canPrint: false
      })
    ]
  }
}

webpack.dll.js

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['react', 'react-dom', 'react-router-dom']
  },
  output: {
    filename: 'dll.[name].js',
    path: path.resolve(__dirname, '../dll'),
    // 全局變量名稱
    library: '[name]_[hash]'
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '../dll/**/*')]
    }),
    new webpack.DllPlugin({
      // 和library 一致，輸出的manifest.json中的name值
      name: '[name]_[hash]',
      // path 指定manifest.json文件的輸出路徑
      path: path.resolve(__dirname, '../dll/[name]-manifest.json'),
    })
  ]
}

modifyVars.js

module.exports = {
  "primary-color": "#009688",
  "menu-item-active-bg": "#009688",
}

以上就是全部配置了。