webpack4中使用extract-text-webpack-plugin@4.0.0-beta.0没有生成文件

Question

webpack4中使用extract-text-webpack-plugin@4.0.0-beta.0进行样式文件提取却没有生成文件，安装了extract-text-webpack-plugin@4.0.0-beta.0，却发现可以编译成功，却没有css文件生成
配置文件如下：

const ExtractTextPlugin=require("extract-text-webpack-plugin");
const config={
    entry:{
        app:__dirname+'/src/app.js',
        main:__dirname+'/src/index.js'
    },
    output:{
        filename:'[name]-[hash].js',
        path:__dirname+'/dist'
    },
    mode:'development',
    devtool:'source-map',//设置source map选项
    devServer:{//设置webpack本地服务器的配置
        contentBase:'./dist',//默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器
        port:'8383',//监听端口
        inline:true,//设置为true，当源文件改变的时候会自动刷新
        historyApiFallback:true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        hot:true//允许热加载
    },
     module:{
      rules:[
          {
            test:/\.css$/,
            use:[
               {loader:'style-loader'},
               {loader:'css-loader',
                options:{
                  modules:true, //指定css modules
                  localIdentName:'[name]__[local]--[hash:base64:5]'// 指定css的类名格式
                }
               },
               {loader:'postcss-loader'}
            ]
          },
          {
            test:/\.less$/,
             use:ExtractTextPlugin.extract({ //分离less编译后的css文件
                fallback:'style-loader',
                use:['css-loader','less-loader']
            })
          },
          {
            test:/\.js$/,
            use:{
              loader:'babel-loader',
              options:{
                presets:['env']
              }
            },
            exclude:/node_modules/
          },
          {
            test:/\.vue$/,
            use:{
              loader:'vue-loader'
            }
          }
      ]
    },
    resolve: {
          alias: {
               'vue': 'vue/dist/vue.js'
                 }
    },
     plugins: [
     new ExtractTextPlugin("css/index.css")
  ]
};

module.exports=config;

在执行webpack命令后却没有对应的index.css生成，这是怎么回事？

Answer 1

是因为你对css-loader之后没有做一个 fallback ，你可以参考这里。

这里有一个 webpack4 入门例子,你可以查看一下 https://github.com/crlang/eas... 。

Answer 2

plugins:[
        new ExtractTextPlugin({
            filename:`[name]_[id]_[hash:8].css`,
        })
    ]

配置里面短代码了吧

Answer 3

js中用import引入的less文件才会被打包。

Answer 4

webpack4打包css用的是 mini-css-extract-plugin，那个插件废弃了啊

Answer 5

请问怎么解决的？我也遇到这个问题了

Answer 6

哇，恶心到吐，我也遇到这个问题。迷一样怎么样都打包不出来