webpack配置ts,eslint,scss

webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const workers = require('os').cpus().length;

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "js/index.js",
    chunkFilename:"js/[name].js",
    clean: true,
  },
  mode: process.env.NODE_ENV,
  devServer: {
    port: 8080,
    hot: true,
    // open: true,
    proxy: {}
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new ESLintPlugin({
      exclude: "node_modules",
      context: path.resolve(__dirname, './src'),
      cache: true,
      cacheLocation: path.resolve(__dirname, "./node_modules/.cache/eslintcache")
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[hash:10]-[name].css',
      chunkFilename: '[id].css',
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin({
        parallel: workers, //启用多进程打包
      }),
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [