在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ webpack4打包不能提取css為單獨的文件(mini-css-extract

webpack4打包不能提取css為單獨的文件(mini-css-extract-plugin)

我用的是mini-css-extract-plugin 這個插件打來提取less文件和css為單獨的文件,開發(fā)時引入了,但是打包后怎么也不會生成css文件,全部按照網(wǎng)上配置的,有人能幫忙解答一下嗎?謝謝??! 是vue項目。

引入的截圖:

clipboard.png

clipboard.png

我的完整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
回答
編輯回答
怣痛

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

2017年12月6日 08:31