webpack+ExtractTextPlugin失效求助：Angular5项目CSS打包异常

我之前在Angular 5项目里也踩过类似的坑，结合你用VS2017的场景，给你几个排查和解决的方向：

1. 检查ExtractTextPlugin配置是否准确 #

Angular 5时代我们常用extract-text-webpack-plugin提取CSS文件（注意要安装对应webpack版本的插件，webpack 4对应extract-text-webpack-plugin@4.x版本），核心是要确保目标SCSS/CSS文件被正确匹配和提取：

首先在webpack配置里引入并实例化插件：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

// 指定输出的vendor.css文件名
const vendorCssPlugin = new ExtractTextPlugin('vendor.css');

然后在module.rules里添加针对第三方/模板CSS的处理规则，重点是include路径必须覆盖你的Angular模板CSS所在目录：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      // 处理模板和第三方依赖的SCSS/CSS，打包到vendor.css
      {
        test: /\.(scss|css)$/,
        // 这里要把你的模板CSS路径和node_modules都加进去
        include: [
          path.resolve(__dirname, 'node_modules'),
          path.resolve(__dirname, './src/assets/template-css') // 替换成你的模板CSS实际路径
        ],
        use: vendorCssPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      // 处理项目自身的SCSS，不纳入vendor
      {
        test: /\.scss$/,
        exclude: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, './src/assets/template-css')],
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    vendorCssPlugin,
    // ...其他插件（比如CommonsChunkPlugin）
  ]
}

如果include路径没配对，哪怕verbose显示处理了SCSS，也只是处理了项目自身的文件，不会打包到vendor.css里。

2. 确保CommonsChunkPlugin和CSS提取关联正确 #

Angular 5通常会用CommonsChunkPlugin拆分vendor代码，你需要确保模板CSS对应的模块被归入vendor chunk：

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function(module) {
    // 把node_modules和模板CSS的模块都归入vendor
    return module.context && (
      module.context.includes('node_modules') || 
      module.context.includes('./src/assets/template-css')
    );
  }
})

这个配置会把符合条件的模块（包括CSS）都打包进vendor chunk，ExtractTextPlugin才能从这个chunk里提取出vendor.css。

3. 排查source map配置的干扰 #

如果你的webpack开启了devtool: 'source-map'，有时候会出现vendor.css里只有source map注释的情况。你可以先临时把devtool改成'none'，重新打包看看是否能生成正常的CSS内容。如果确认是source map的问题，可以调整ExtractTextPlugin的配置：

new ExtractTextPlugin({
  filename: 'vendor.css',
  disable: false,
  allChunks: true // 确保提取所有chunk的CSS
})

4. 避开VS2017内置webpack的兼容性问题 #

VS2017自带的webpack版本可能和你项目依赖的版本不兼容，建议你手动用npm执行打包：

1. 右键项目 → 选择“命令行” → “npm install”，确保所有依赖都正确安装
2. 在package.json的scripts里添加打包命令："build": "webpack --config webpack.config.js"
3. 执行npm run build手动打包，观察输出是否正常

另外，你可以仔细查看verbose输出里的模块路径，确认处理的SCSS文件是不是你想要打包进vendor的那些，如果路径不对，及时调整include规则。

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