配置Webpack编译TypeScript与Sass，去除冗余style.js文件

核心问题原因 #

你当前的配置大概率是把.scss文件单独设成了Webpack入口，或者入口配置里包含了scss文件——Webpack默认会为每个入口生成对应JS文件，哪怕这个入口只有样式代码，所以才会多出style.js。

方案一：保留MiniCssExtractPlugin（推荐，适配后续生产需求） #

这个插件是Webpack分离CSS的标准方案，后续加PostCSS、样式压缩等操作都能无缝兼容，只需调整入口和loader配置：

1. 调整入口配置 #

只把.ts文件作为唯一入口，然后在你的主TS文件（比如src/index.ts）里引入所有需要的.scss文件，这样Webpack会把样式从JS中提取出来，不会生成多余的JS文件。

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  entry: './src/index.ts', // 仅TS作为入口，在index.ts里写 import './styles/main.scss' 引入样式
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // 每次构建自动清空dist目录，避免残留冗余文件
  },
  // ...其他配置
}

2. 配置Loader和Plugin #

开发环境用style-loader把样式注入页面，生产环境用MiniCssExtractPlugin.loader提取成单独CSS文件，同时配置TS和SCSS的处理规则：

// 接上面的webpack.config.js内容
module.exports = {
  // ...入口、output配置
  module: {
    rules: [
      // 处理TS文件
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      // 处理SCSS文件
      {
        test: /\.scss$/,
        use: [
          // 根据环境切换loader：生产环境提取CSS，开发环境注入页面
          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          // 后续加PostCSS的话，在这里插入'postcss-loader'，位置在css-loader之后、sass-loader之前
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    // 仅生产环境启用插件，开发环境也可以开启预览效果
    isProduction && new MiniCssExtractPlugin({
      filename: 'style.css', // 指定输出的CSS文件名
    }),
  ].filter(Boolean), // 自动过滤掉环境不匹配的插件
  resolve: {
    extensions: ['.ts', '.js'], // 让Webpack自动识别这些后缀的文件
  },
}

这样配置后，打包只会生成main.js和style.css，不会再出现多余的style.js。

方案二：不使用MiniCssExtractPlugin（仅开发环境临时用，不推荐生产） #

如果不想用这个插件，开发环境可以直接用style-loader把样式打包进JS，运行时注入页面，但生产环境不建议这么做（样式和JS一起加载会影响首屏速度）：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
}

后续生产环境扩展配置 #

JS压缩 #

Webpack5在mode: 'production'模式下默认会用TerserPlugin压缩JS，无需额外配置。如果需要自定义规则，可以手动添加：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false, // 移除注释
          },
        },
        extractComments: false, // 不把注释单独提取成文件
      }),
    ],
  },
}

CSS处理（PostCSS+压缩） #

1. 先安装依赖：npm install postcss-loader postcss postcss-preset-env css-minimizer-webpack-plugin --save-dev
2. 项目根目录创建postcss.config.js：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-preset-env')({
      browsers: 'last 2 versions', // 自动添加浏览器前缀
    }),
  ],
}

3. 修改Webpack配置，加入PostCSS和CSS压缩：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader', // 插入到css-loader之后、sass-loader之前
          'sass-loader',
        ],
      },
    ],
  },
  optimization: {
    minimizer: [
      new TerserPlugin(), // 压缩JS
      new CssMinimizerPlugin(), // 压缩CSS
    ],
  },
}

内容的提问来源于stack exchange，提问作者celsomtrindade