webpack,vite为JS、HTML、CSS开启条件编译,宏剔除,代码剔除

在Webpack和Vite中，可以通过各自的配置和插件实现条件编译、宏剔除和代码剔除。以下是简要的配置示例：

Webpack:

1. 条件编译：使用webpack.IgnorePlugin忽略某些文件或目录。
2. 宏剔除：利用babel-loader和babel的配置来剔除宏。
3. 代码剔除：使用TerserPlugin配置代码去除无用代码。

Vite:

1. 条件编译：Vite默认支持按需编译。
2. 宏剔除：类似于Webpack，使用Babel插件。
3. 代码剔除：Vite使用Rollup打包，可以配置Rollup插件进行代码去除。

Webpack 配置示例:

// webpack.config.js
const webpack = require('webpack');
const path = require('path');
 
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              // 宏剔除的Babel插件
              'your-babel-plugin-to-strip-macros',
            ],
          },
        },
      },
      // ...
    ],
  },
  plugins: [
    // 忽略某些文件或目录，实现条件编译
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
    // 代码剔除的插件
    new webpack.optimize.ModuleConcatenationPlugin(),
    // 代码去除的插件
    new TerserPlugin({
      terserOptions: {
        compress: {
          dead_code: true, // 去除无用的代码
          // 其他压缩选项
        },
      },
      extractComments: false, // 是否去除注释
    }),
  ],
  // ...
};

Vite 配置示例:

// vite.config.js
import { defineConfig } from 'vite';
import babel from '@rollup/plugin-babel';
 
export default defineConfig({
  plugins: [
    babel({
      presets: [
        [
          '@babel/preset-env',
          {
            // 配置babel
          },
        ],
      ],
      plugins: [
        // 宏剔除的Babel插件
        'your-babel-plugin-to-strip-macros',
      ],
      exclude: 'node_modules/**', // 忽略node_modules，实现条件编译
      babelHelpers: 'bundled', // 使用babel v7的新特性
    }),
  ],
  // ...
});

在实际应用中，你需要根据项目具体需求安装和配置相应的插件和loader。以上示例中的插件和配置选项可能需要你根据自己的项目环境进行相应的调整。