webpack4打包不能提取css为单独的文件（mini-css-extract-plugin）

Question

我用的是mini-css-extract-plugin 这个插件打来提取less文件和css为单独的文件，开发时引入了，但是打包后怎么也不会生成css文件，全部按照网上配置的，有人能帮忙解答一下吗？谢谢！！ 是vue项目。

引入的截图：

我的完整webpack.config.prod.js:

const baseConfig = require('./webpack.config.base')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const merge = require('webpack-merge')
const path = require('path')
const productionConfig = merge(baseConfig, {
  mode: 'production',
  entry: {
    app: path.join(__dirname, '../src/index.js'),
    vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']
  },
  output: {
    path: path.join(__dirname, '../build/public'),
    filename: 'js/[name].bundle.js',
    chunkFilename: 'js/[name].[chunkhash:8].chunk.js',
    publicPath: './public'
  },
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ],
        include: [
          path.resolve(__dirname, 'node_modules')
        ]
      },
      {
        test: /\.less/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ],
        include: [
          path.resolve(__dirname, 'node_modules')
        ]
      },
      {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '[name].[hash:8].[ext]',
              publicPath: './public/img',
              outputPath: '/img'
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          limit: 80000,
          name: '[name].[hash:8].[ext]',
          publicPath: './public/fonts',
          outputPath: '/fonts'
        }
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    },
    runtimeChunk: true
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash:8].css',
      chunkFilename: '[id].css'
    })
  ]
})
module.exports = productionConfig

Answer 1

我也遇到了，解决办法是把package.json里面的sideEffects去掉。

Answer 2

应该样式文件被引入却没使用, 直接被tree-shaking掉了, package.json中加

"sideEffects": [
    "*.css",
    "*.scss",
    "*.sass",
    "*.less"
  ]

Answer 3

我记得 webpack4 好像要用 mini-css-extract-plugin 代替 extract-text-webpack-plugin 了吧

Answer 4

这有一个类似的issue:
https://github.com/webpack-co...

但很久以前了，我没办法亲自去尝试，希望能帮到大家

Answer 5

兄弟，你的问题怎么解决的？我遇到的问题与你类似，但是我mode改成development就没问题了，production还是如此

Answer 6

同问题 , 找不到问题所在啊 , 尴尬