无法在TypeScript项目中使ExtractTextPlugin正常工作

嘿，我看你在配置ExtractTextPlugin时碰到了麻烦，从你给出的代码片段来看，核心问题是缺少处理CSS文件的loader规则，而且可能还有一些版本匹配、插件注册的细节没做到位。下面是完整的解决方案：

1. 先确认版本兼容性 #

首先要划重点：extract-text-webpack-plugin 只支持 Webpack 3及更低版本！如果你用的是Webpack 4或更高版本，官方已经推荐用mini-css-extract-plugin来替代它了。如果坚持要用ExtractTextPlugin，记得安装对应版本：

# 针对Webpack 3的正确安装命令
npm install extract-text-webpack-plugin@3 --save-dev

2. 完善你的webpack.config.js配置 #

你目前的配置里只处理了TS/TSX文件和source map，完全没配置CSS相关的规则，这插件当然没法工作。下面是补全后的完整配置：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

// 先实例化插件，指定提取后的CSS文件名
const extractStyles = new ExtractTextPlugin({
  filename: "styles.[contenthash].css", // 加contenthash可以做缓存优化
  // 开发环境禁用提取，用style-loader嵌入页面，方便热重载
  disable: process.env.NODE_ENV === "development"
});

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, "build"),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/, 
        loader: "awesome-typescript-loader" 
      },
      { 
        enforce: "pre", 
        test: /\.js$/, 
        loader: "source-map-loader" 
      },
      // 关键：添加处理普通CSS的规则
      {
        test: /\.css$/,
        use: extractStyles.extract({
          fallback: "style-loader", // 插件禁用时，用style-loader把CSS注入页面
          use: "css-loader" // 负责解析CSS文件中的import、url等语法
        })
      },
      // 如果你用Sass预处理器，再加上这条规则
      {
        test: /\.scss$/,
        use: extractStyles.extract({
          fallback: "style-loader",
          // loader从右到左执行：先转Sass为CSS，再解析CSS
          use: ["css-loader", "sass-loader"]
        })
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html" // 确保你项目里有这个HTML模板文件
    }),
    extractStyles // 千万别忘了把插件实例加入plugins数组！
  ],
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"] // 让webpack能识别这些扩展名的文件
  },
  devtool: "source-map"
};

3. 几个容易踩坑的点要注意 #

• 插件必须注册到plugins数组：很多人会忘记把实例化的ExtractTextPlugin加到plugins里，这会导致插件完全不运行。
• loader顺序不能乱：webpack的loader是从右往左执行的，比如处理Sass时，sass-loader先把Sass编译成CSS，再交给css-loader处理，最后才由插件提取。
• 开发环境别强制提取：开发时用style-loader把CSS嵌入页面，能实现热重载，调试起来更方便；生产环境再提取成单独文件，利于缓存和页面加载速度。
• 安装必要的依赖：处理CSS需要css-loader和style-loader，处理Sass还要额外装sass-loader和node-sass，别漏装了！

内容的提问来源于stack exchange，提问作者Knows Not Much