鍍金池/ 問答/HTML/ webpack4中使用extract-text-webpack-plugin@4

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

webpack4中使用extract-text-webpack-plugin@4.0.0-beta.0進行樣式文件提取卻沒有生成文件,安裝了extract-text-webpack-plugin@4.0.0-beta.0,卻發(fā)現(xiàn)可以編譯成功,卻沒有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',//設(shè)置source map選項
    devServer:{//設(shè)置webpack本地服務(wù)器的配置
        contentBase:'./dist',//默認webpack-dev-server會為根文件夾提供本地服務(wù)器,如果想為另外一個目錄下的文件提供本地服務(wù)器
        port:'8383',//監(jiān)聽端口
        inline:true,//設(shè)置為true,當源文件改變的時候會自動刷新
        historyApiFallback:true,//在開發(fā)單頁應(yīng)用時非常有用,它依賴于HTML5 history API,如果設(shè)置為true,所有的跳轉(zhuǎn)將指向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;

在執(zhí)行webpack命令后卻沒有對應(yīng)的index.css生成,這是怎么回事?

回答
編輯回答
安若晴

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

2017年7月31日 10:17
編輯回答
蔚藍色

webpack4打包css用的是 mini-css-extract-plugin,那個插件廢棄了啊

2017年10月27日 10:43
編輯回答
喜歡你

是因為你對css-loader之后沒有做一個 fallback ,你可以參考這里。

這里有一個 webpack4 入門例子,你可以查看一下 https://github.com/crlang/eas... 。

2017年7月25日 11:51
編輯回答
瞄小懶

請問怎么解決的?我也遇到這個問題了

2017年5月21日 06:59
編輯回答
魚梓
plugins:[
        new ExtractTextPlugin({
            filename:`[name]_[id]_[hash:8].css`,
        })
    ]

配置里面短代碼了吧

2017年9月26日 18:46