Webpack 4使用extract-text-webpack-plugin时出现Entrypoint undefined报错求助

我之前也碰到过这个问题，其实核心原因是extract-text-webpack-plugin对Webpack 4的兼容性不足——虽然它能正常完成CSS提取，但没有适配Webpack 4的entrypoint和chunk处理逻辑，所以会抛出这个奇怪的警告。官方在Webpack 4之后已经明确推荐用mini-css-extract-plugin替代它，后者专门针对Webpack 4+做了优化，能彻底解决这个问题。

具体解决步骤： #

1. 替换依赖包 #

先卸载旧的插件，安装官方推荐的替代工具：

npm uninstall extract-text-webpack-plugin --save-dev
npm install mini-css-extract-plugin --save-dev

2. 修改Webpack配置文件 #

把原来使用extract-text-webpack-plugin的配置全部替换为mini-css-extract-plugin的写法：

原来的extract-text配置（需要替换）：

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

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
};

替换后的mini-css配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 生产环境用提取插件，开发环境用style-loader支持热重载
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css' // 提取后的CSS文件名，和之前保持一致即可
    })
  ]
};

3. 重新执行构建 #

现在再运行npm run build，那个"Entrypoint undefined"的警告就会消失，同时CSS文件依然会正常提取到指定位置。

额外提示： #

• 开发环境建议保留style-loader，它会把CSS注入到页面的style标签里，支持热重载，开发体验更好；只有生产环境再用mini-css-extract-plugin提取独立的CSS文件。
• 如果项目里用了SCSS/SASS等预处理器，只需要在use数组里加上对应的loader（比如sass-loader）即可，mini-css-extract-plugin能完美兼容。

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